React/성능,코드 최적화 (1) 썸네일형 리스트형 성능 최적화 - 메모이제이션 ( React.memo, useMemo, useCallback ) useMemo 와 useCallback 은 불필요한 자식 요소의 재렌더링이나 계산을 억제하기 위해 사용합니다. 설명에 앞서 리액트의 컴포넌트의 재렌더링되는 시점을 보면 props 값이나 state(상태값) 이 변경 되었을 때 컴포넌트에서 참조되는 Context 값이 변경 되었을 때 부모 컴포넌트가 렌더링 되었을 때 이렇게 크게 세가지로 인해 자식 컴포넌트에서 불필요한 재렌더링이 일어납니다. React.memo 함수 컴포넌트를 메모이제이션할 수 있다. 부모의 컴포넌트가 제렌더링 되었을 때 자식 컴포넌트도 재랜더링이 일어나게 되어있습니다. 하지만 React.memo를 사용하면 props의 값이 변하지 않는 이상 자식 컴포넌트의 재렌더링을 방지 할 수 있습니다. 아래 예시를 보면 Child_1 컴포넌트는 메모.. 이전 1 다음
