구 가이드 : https://ko.legacy.reactjs.org/docs/jsx-in-depth.html JSX에서 자식 다루기 문자열 리터럴 여는 태그와 닫는 태그 사이에 문자열 리터럴을 넣을 수 있고, props.children은 그 자식이 된다. 이때 JSX는 다음과 같이 공백을 제거한다. 각 줄의 처음과 끝에 있는 공백을 제...

https://ko.legacy.reactjs.org/docs/context.html Summary React의 context를 이용하면 컴포넌트 트리 전체에 데이터를 제공할 수 있으며, props를 일일이 넘겨주지 않아도 됩니다. context를 사용하면 컴포넌트 트리 안에서 전역적인 데이터를 공유할 수 있습니다. context는 변하는 데이터를 여...

출처 : https://ktseo41.github.io/blog/log/virtual-dom-back-in-block.html 요약 이 글은 React와 Million.js의 내부 동작 원리와 가상 DOM에 대한 분석을 제공하며, 가상 DOM의 성능 문제와 블록 가상 DOM의 접근 방식에 대해 다룹니다. 사실 🌳 “가상 DOM은 빠르다”...

https://react-ko.dev/reference/react-dom/flushSync 콜백 내부의 모든 업데이트를 동기적으로 flush 하도록 하여 DOM이 즉시 업데이트 된다. flushSync(callback) Caveats flushSync는 Suspense 경계를 강제로 fallback state로 표시할 수 있다 flushS...

https://react-ko.dev/reference/react-dom/createPortal <div> <SomeComponent /> {createPortal(children, domNode, key?)} </div> parameters children : JSX or 문자열 or 숫자 등 ...

https://react-ko.dev/reference/react-dom/components React는 모든 브라우저 빌트인 HTML 및 SVG 컴포넌트를 지원한다. Common <div>와 같은 모든 브라우저 빌트인 컴포넌트를 몇가지 props와 함께 이벤트를 지원한다. 리액트가 추가한 props children danger...

https://react-ko.dev/reference/react/useState const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // 초기화 함...

https://react-ko.dev/reference/react/useReducer import { useReducer } from 'react'; function reducer(state, action) { // ... } function createInitial(initialArg) { // ... } function M...

https://react-ko.dev/reference/react/useRef 렌더링에 필요하지 않은 값을 참조할 수 있는 Hook const ref = useRef(initialValue) Caveats ref.current 는 mutate 가능하다. 하지만 렌더링에 사용되는 객체(state의 일부)를 포함하는 경우 mutate해서는 안...

https://react-ko.dev/reference/react/useImperativeHandle ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해준다. useImperativeHandle(ref, createHandle, dependencies?) import { forwardRef, useImperativeHandle } from...