React Context에 대해 알아보자: Provider와 Consumer 관계, 정의, 사용법 그리고 제약사항

React의 Context API는 컴포넌트 트리 전체에 걸쳐 데이터를 공유할 수 있게 해줍니다. 이는 전역 상태를 관리하는 수단으로 널리 사용되며, 주로 로그인 정보, UI 테마, 언어 등을 설정하는데 쓰입니다. 본문에서는 Context의 정의, Provider와 Consumer의 관계, 사용법, 그리고 동적으로 Context의 값을 변경하는 방법에 대해 알아보겠습니다.

Context의 정의

먼저, Context API는 React의 부분이며, 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있게 해줍니다. 이를 사용하면, 중간에 있는 컴포넌트들을 건너뛰고 바로 자식 컴포넌트에게 데이터를 전달할 수 있습니다. 이는 prop drilling 문제를 해결하는데 도움을 줍니다.

Provider와 Consumer의 관계

React Context는 Provider와 Consumer라는 두 가지 주요한 개념을 가지고 있습니다. Provider는 Context를 생성하고 값(value)을 제공하며, Consumer는 그 값을 소비합니다.

Provider는 트리 안에서 context를 제공하며, 이를 위해 value prop을 받습니다. 모든 Consumer 컴포넌트는 가장 가까운 Provider로부터 현재 value를 읽습니다.

Consumer는 Context에 대한 구독을 유지합니다. 이는 Provider의 value prop이 변경될 때마다 re-render를 발생시키는 것을 의미합니다.

Context 사용법

Context를 사용하기 위해서는 먼저 Context를 생성해야 합니다. React.createContext를 사용하여 Context를 생성할 수 있습니다. 이 함수는 Context 객체를 반환하며, 이 객체는 Provider와 Consumer 컴포넌트를 가지고 있습니다.

const MyContext = React.createContext(defaultValue);

위 코드에서 defaultValue는 Context의 기본값입니다. 이후 Provider를 사용하여 Context 값을 제공할 수 있습니다.

  | defaultValue에 구조를 정의를 하면 IDE로부터 자동완성기능 도움을 받을 수도 있습니다.

<MyContext.Provider value={/* some value */}>

Consumer를 사용하여 Context 값을 소비할 수 있습니다.

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

useContext Hook을 사용한 Context 사용법

React의 Hook 중 하나인 useContext를 사용하면 함수 컴포넌트에서 Context를 더욱 쉽게 사용할 수 있습니다. useContext는 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환합니다.

const contextValue = React.useContext(MyContext);

위와 같이 사용하면, Context의 Consumer를 사용하지 않고도 현재 Context 값을 바로 얻을 수 있습니다. 이 값은 해당 컴포넌트가 렌더링 된 가장 가까운 Provider의 value prop을 참조합니다.

Context의 값을 동적으로 변경하는 방법

Context의 값을 동적으로 변경하려면, Context 값을 제공하는 컴포넌트의 state를 변경하면 됩니다. 이 때, setState 함수나 React의 Hook인 useState를 사용할 수 있습니다.

const [value, setValue] = React.useState(initialValue);

<MyContext.Provider value={value}>

Context 값 동적 변경: value에 함수 연결

Context의 value prop에 함수를 연결함으로써, Context 값의 동적 변경을 가능하게 할 수 있습니다. 이 방법을 사용하면, Provider의 상태를 변경하는 함수를 Context를 통해 전달하고, 이 함수를 소비하는 컴포넌트에서 호출함으로써 상태를 변경할 수 있습니다.

const [value, setValue] = React.useState(initialValue);

<MyContext.Provider value={{ value, setValue }}>

위와 같이 Provider의 value prop에 객체를 전달하면, 이 객체 내부의 value와 setValue가 Context를 통해 전달됩니다. 이후 소비하는 컴포넌트에서는 setValue 함수를 호출하여 상태를 변경할 수 있습니다.

const { value, setValue } = React.useContext(MyContext);

// setValue를 호출하여 상태 변경
setValue(newValue);

Context의 제약사항

Context API는 강력하긴 하지만, 모든 상황에 적합한 것은 아닙니다. Context를 사용하면 컴포넌트의 재사용성이 떨어질 수 있습니다. 특히 버튼 같이 재사용성이 필요한 컴포넌트에 컨텍스트 훅을 이용해서 구현하면 재사용성이 현저히 떨어집니다.

또한, 상태가 1초에 수십수백번씩 자주 바뀌는 경우는 성능 최적화가 되어 있지 않기때문에 사용에 유의해야합니다.