useContext & Provider

Context API

많은 컴포넌트에서 사용되는 변경이 잘 일어나지 않는 값에 대해 컨텍스트 API 사용을 고려

• 컨텍스트 API: 컴포넌트 트리의 모든 하위 트리에 값을 제공하기 위한 방법

• 컨텍스트 객체: React.createContext() 로 생성됨, 프로바이더/소비자를 포함한다.

• Provider 컴포넌트: 컨텍스트를 제공하며, 하위 컴포넌트가 컨텍스트 값을 구독할 수 있도록 함

• useContext 훅: 컨텍스트 값을 소비하기 위한 훅으로, 컨텍스트 객체를 인수로 받아 현재 컨텍스트 값을 반환함

불필요한 리렌더링 방지하기

Context 값을 소비하는 컴포넌트 외에 하위 컴포넌트들은 리렌더링 되지 않는다.

커스텀 컴포넌트에서 자손 컴포넌트를 리렌더링하지 않게 하기 위해 children 프롭을 사용하라.

• Provider 컴포넌트가 하위 컴포넌트들을 children 프로퍼티로 접근하여 Provider 컴포넌트 안에서 상태를 갱신해도 children 프로퍼티는 변경되지 않기 때문

  • children은 여전히 같은 객체

• Context 객체로 묶인 프로퍼티들은 이 중 하나라도 변경되면, 변경된 값과 무관한 컴포넌트도 리렌더링 된다.

  • 컨텍스트를 사용하는 '모든' 컴포넌트가 리렌더링된다.

  • 프로바이더에 넘기는 컨텍스트 값(객체)이 다시 생성되어 할당되기 때문

  • 이런 이유로 프로바이더 컴포넌트의 부모가 리렌더링되어도 동일하게 리렌더링된다.

    • 이 이슈는 useMemo로 컨텍스트 값을 감싸면 해결 가능하다.

• 여러 프로바이더를 통해 컨텍스트 값을 분할하는것도 방법이다.

  • 함께 소비되는 값들로 묶어라

  • 함께 소비되는 경우가 드문 값에 대해서는 여러 개의 컨텍스트로 분리하는것을 고려

• 프로바이더 중첩이 심해지면(wrapper hell) 여러 프로바이더를 한 곳에 그룹화해주는 커스텀 프로바이더를 만들면 된다.