React16 [형을 위한 리액트] 2. JSX 형을 위해서 썼지만 정작 형은 안 보는 형을 위한 리액트1. JSX의 원리JavaScriptXML로 자바스크립트를 HTML 처럼 작성할 수 있게 해주는 문법임. 자바스크립트의 확장 문법.Bebel과 같은 트랜스파일러가 리액트가 실행될 때 JSX문법을 React.createElement() 함수를 실행시켜 변환시켜줌.코드 예를 보면,아래와 같이 하나의 컴포넌트가 jsx를 반환하는 코드를 작성하면,return ( Hello, world! This is a paragraph. );바벨이 아래와 같이 코드를 변환시켜줌. createElement를 실행하면 가상돔을 구성하는 구성요소.import { jsx as _jsx } from 'react/jsx-runtime';_jsx( 'div', {.. 2024. 10. 15. [형을 위한 리액트] 1. 리액트를 왜 쓰는지 리액트는 자바스크립트로 동적인 ui를 쉽게 제작할 수 있도록 해주는 라이브러리가장 흔한 특징은 버츄얼돔으로 최적화 업데이트, spa(으)로 새로고침없이 동적인 ui를 보여줌 컴포넌트 기반 아키텍처, 단방향 데이터 흐름, jsx 활용문법등 이런걸 알아보기전 간단한 사용법으로 편리함을 보고감1. 기존의 작성 방법의 변화일단 이런 투두리스트에서 투두를 하나씩 추가할 때 자바스크립트를 사용함. 바닐라 자바스크립트 공통 html To-Do List Add Task 자바스크립트로 작성하는 방법에는 두 가지 방식이 있음.하나는 돔을 만들어서 돔을 추가하는 방식.//돔 기반 버전document.addEventListener('DOMContentLoade.. 2024. 10. 7. setState 함수는 Dependency list에 넣어줘야 할까? setState 함수는 Dependency list에 넣어줘야 할까? useEffect나 useCallback, useMemo 등 각 훅들에 Dependency list에 set함수를 넣어줘야 하는지 갑자기 궁금해짐. NextJS로 진행하면 아래 두 개의 코드처럼 사용해도 린트가 경고를 안 해준다. 그래서 찾아봤더니 const fn = useCallback(() => { setState(true); }, [setState]); const fn = useCallback(() => { setState(true); }, []); 공식문서의 대답 리액트 구버전 공식문서에서 setState는 함수 식별자 ID가 안전하고 리렌더링 되어도 변하지 않는다고 한다. https://legacy.reactjs.org/doc.. 2024. 1. 17. zustand persist(broswer storage(localstorage)연동) zustand persist(broswer storage연동) - 리액트 기준 사용법 - NextJS 기준 사용법 리액트 기준 사용법 기존 zustand의 스토어 정의에서 persist 미들웨어와 옵션을 추가해 준 것이 끝입니다. 공식문서 샘플을 확인 하여 broswer storage를 사용하는데 필요한 최소 코드를 확인해 봅시다 아래 코드를 보시면 옵션 부분 중 name만 명시해도 기본으로 localStorage가 적용되기 때문에 손쉽게 사용가능 합니다. import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' export const useBearStore = create( persist.. 2023. 12. 29. 이전 1 2 3 4 다음
