반응형
리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 됩니다. 바뀐 내용이 없다 할지라도요.
물론, 실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당합니다. 하지만, Virtual DOM 에는 모든걸 다 렌더링하고 있다는 겁니다.
나중에는, 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 Virtual DOM 에 렌더링 하는 리소스를 아낄 수도 있습니다. 이것은 다음번에 알아볼게요. -> useCallback, React.memo 사용
아래와 같이 component를 React.memo로 감싸주고 useCallback사용해야함
export default React.memo(CreateUser);https://react.vlpt.us/basic/19-React.memo.html
19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook
19. React.memo 를 사용한 컴포넌트 리렌더링 방지 이번에는, 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해
react.vlpt.us
반응형
'react' 카테고리의 다른 글
| 왜 리액트는 대세가 되었을까? DOM관리불필요,유지보수,생산성 (0) | 2024.01.11 |
|---|---|
| 최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기 (0) | 2024.01.11 |
| useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용 (0) | 2024.01.10 |
| re-render의 개념, localStorage.setItem(key,value), useEffect(()=>{},dependencies?) (0) | 2023.12.20 |
| react-intl (international, 다국어 관련) (0) | 2022.08.02 |