const value = useContext(SomeContext) Parameters SomeContext createContext로 생성된 어떠한 context Returns 가장 가까운 SomeContext.Provider에 전달된 value값을 반환 Provider가 없는 경우 defau...
Suspense
https://react-ko.dev/reference/react/Suspense 자식이 로딩을 완료할 때까지 fallback을 표시한다 <Suspense fallback={<Loading/>}> <SomeComponent/> </Suspense> Props children : 렌더링하려는 ...
Strictmode
https://react-ko.dev/reference/react/StrictMode 개발 중인 컴포넌트에서 흔히 발생하는 버그를 조기에 발견할 수 있도록 해준다. <StrictMode> <App /> </StrictMode> 불완전한 렌더링으로 인한 버그를 찾기위해 한번 더 렌더링한다 ...
Profiler
https://react-ko.dev/reference/react/Profiler React 트리의 렌더링 성능을 프로그램적으로 측정할 때 사용할 수 있다. <Profiler id="App" onRender={onRender}> <App /> </Profiler> Parameter id ...
Fragment
https://react-ko.dev/reference/react/Fragment Caveats React는 <><Child/></>와 [<Child/>] 사이, <><Child/></>와 <Child/> 사이를 번갈아 렌더링할 때 state를 재설정하지 않는...
Use
https://ko.react.dev/reference/react/use Promise나 Context와 같은 데이터를 참조하는
Starttransition
https://ko.react.dev/reference/react/startTransition UI를 차단하지 않고 state를 업데이트할 수 있게해줌 import { startTransition } from 'react'; function TabContainer() { const [tab, setTab] = useState('about'...
Memo
https://react-ko.dev/reference/react/memo 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너 뛸 수 있다. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) Props Component : 메모화 하려는 컴포넌트 arePropsEqua...
Lazy
https://ko.react.dev/reference/react/lazy lazy를 통해 로딩 중인 컴포넌트가 처음으로 렌더링 될때까지 연기할 수 있다 Reference lazy(load) import { lazy } from "react" const MarkdownPreview = lazy(() => import("./Markdown...
성능하면 빠질 수 없는 메모이제이션, 네가 궁금해
https://d2.naver.com/helloworld/9223303 메모이제이션으로 성능을 높일 수 있으나, 메모이제이션은 메모리에 특정한 값을 저장하는 것이기에 정말 필요하지 않는 경우에도 남용하면 성능 저하의 원인이 된다. React에서의 메모이제이션 사용 React 에서는 memo, useMemo, useCallback을 통해 메모이제이...