_(1).jpeg&blockId=0e552736-74f0-4f5a-89e1-328d4931ca7c)
듀오링고
스픽
헬스 1시간
react advanced 8장
코딩테스트 강의 - graph
react advanced 8
•
state로 관리하게 되면 해당 상태를 가진 컴포넌트 안의 모든 컴포넌트가 리렌더링 된다.,
•
하지만 context로 분리하게 되면 해당 상태를 필요로 하는 컴포넌트만 리렌더링할 수 있다.,
•
context value change: Context.provider를 관리하는 컴포넌트가 부모 컴포넌트의 리렌더링에 의해 리렌더링된다면 value는 재생성되고 이 context를 사용하는 컴포넌트들은 리렌더링될 것이다.,
•
이럴 때는 context value를 useMemo, useCallback을 사용해서 메모이제이션 해준다.,
•
context value를 쓰는 컴포넌트가 여러 개고, 각 컴포넌트에서 다른 value를 사용한다면 context를 분리해서 context consume하는 컴포넌트들끼리 서로 리렌더링에 영향이 가지 않게 할 것.,
•
useReducer를 사용하면 여러 state를 관리하는 데 도움이 되고 state에 영향을 받지 않으면서(state를 의존하지 않고) state를 업데이트할 수 있다. (ex. toggle),
•
provider를 스플리팅하거나 reducer로 마이그리에션하기 싫은 경우, 혹은 리렌더링을 막고 싶은, 성능이 중요한 하나의 컴포넌트만 수정하고 싶은 경우는 어떻게 할까? HOC으로 consumer 컴포넌트를 React.memo를 통해 메모이제이션한 뒤 익명 컴포넌트에서 사용하면 리렌더링을 막을 수 있다. 리렌더링되는 것은 익명 컴포넌트이고, 컨슈머를 메모이제이션을 하면 open이 바뀌지 않는 이상 리렌더링이 안되기 때문이다.,
const withNavigationOpen = (AnyComponent) => {
const AnyComponentMemo = React.memo(AnyComponent); // 여기서 진짜 중요
return (props) => {
const { open } = useContext(Context); // useContext는 여기서만 사용함
return <AnyComponentMemo {...props} openNav={open} />;
};
};
JavaScript
복사
•
useContext는 HOC 내부의 익명 컴포넌트에서만 사용됨.,
•
AnyComponentMemo는 그 아래 렌더링되는 컴포넌트고, React.memo로 감싸져 있어서 props가 바뀌지 않으면 리렌더링 안 됨.,
•
중요한 조건: open은 context 안에서 불필요하게 바뀌지 않는 memoized 함수여야 함.
