Provider value 에서 주의해야 할 사항

컨텍스트는 재렌더링 여부를 결정할 때 레퍼런스 정보를 사용하기에

Provider 의 부모 컴포넌트가 재렌더링 되었을 경우, 의도치 않게 하위 consumer 컴포넌트의 재렌더링이 일어날 수 있음.

 

function App (props) {
    return (
        <MyContext.Provider value={{ etc: 'etc' }}>
            <Toolbar />
        </MyContext.Provider>
    );
}

 

위 코드는 Provider 컴포넌트가 재렌더링 될 때마다 모든 하위 consumer 컴포넌트의 재렌더링이 발생하는 코드임.

왜냐? value  prop을 위한 새로운 객체가 매번 생성되기 때문임.

 

function App(props) {
    const [value, setValue] = useState({ etc: 'etc' });

    return (
        <MyContext.Provider value={value}>
            <Toolbar />
        </MyContext.Provider>
    );
}

 

이를 방지하기 위해선 위의 코드처럼 value 를 직접 넣는 것이 아니라~

컴포넌트의 state 로 옮기고, 해당 state 의 값을 넣어 줘야 함!