providervalue-identity

React Context가 리렌더링에 미치는 영향을 설명해 주세요

예상 시간
7분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

Provider 아래 모든 자식이 무조건 리렌더링되나요?

부가 설명

function AppProvider({ children, user }) {
  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>;
}

value 객체는 render마다 새로 만들어집니다. consumer가 많다면 불필요한 리렌더링이 늘 수 있습니다.

function AppProvider({ children, user }) {
  const value = useMemo(() => ({ user }), [user]);
 
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

이렇게 하면 user가 바뀌지 않는 동안 value 참조를 유지할 수 있습니다.

Context는 전역 상태 관리 도구처럼 보이지만, update granularity를 잘못 잡으면 넓은 범위가 같이 다시 렌더링될 수 있습니다. 특히 theme, auth, locale처럼 자주 바뀌지 않는 값은 괜찮지만, 입력값처럼 자주 바뀌는 값을 큰 context 하나에 넣으면 부담이 커질 수 있습니다.

Context는 props drilling을 줄여 주지만, value identity와 consumer 리렌더링 비용도 함께 고려해야 합니다.

한 줄 정리

Context value가 바뀌면 그 context를 읽는 consumer가 다시 렌더링될 수 있으므로 value identity와 context 분리를 신경 써야 합니다.