Context

Context

Context – React

context를 사용하면 props로 상태를 일일이 넘길 필요 없이 데이터를 트리에 제공할 수 있습니다.

언제 Context를 써야 할까

기존에 React에서 데이터를 전역적으로 사용하기 위해서는 Redux나 Mobx와 같은 외부 라이브러리에 의존해야했습니다. 하지만 이를 내부적으로 해결하기 위해 고안된 방법입니다.

import React from 'react';

function ThemeButton(props){
  const {theme} = props;
  return (
    <button style={{color: theme === 'dark' ? 'dark' : 'white'}}>버튼</button>
  )
}

function App() {

  return (
    <div>
      <ThemeButton theme={'dark'}/>
    </div>
  );
}
export default App;

위와 같이 코드가 작성되어 있다면 모든 themebutton 컴포넌트를 사용할 때 theme를 props로 내려줘야 할 것입니다.

import React, {useContext} from 'react';

const themes = {
  theme: 'white'
}

const ThemeContext = React.createContext(themes)

function ThemeButton(){
  const {theme} = useContext(ThemeContext);
  return (
    <button style={{color: theme === 'dark' ? 'dark' : 'white'}}>버튼</button>
  )
}

function App() {

  return (
    <ThemeContext.Provider value={themes}>
      <ThemeButton/>
    </ThemeContext.Provider>
  );
}
export default App;

이러한 코드를 context를 통해서 동작하도록 한다면 굳이 props로 모든 컴포넌트에 내려줄 필요 없이 데이터를 조작할 수 있습니다.

Context를 사용하기 전에 고려할 것

컴포넌트에 context를 사용하면 재사용하기가 까다로워집니다. 컴포넌트 합성을 이용해서 이러한 문제를 해결할 수도 있지만, context는 주로 테마, 데이터 캐시등을 관리하는데 사용하는 것이 가장 바람직합니다.

API

React.createContext

const MyContext = React.createContext(defaultValue);

Context를 읽어낼 때 React는 트리 상위에서 가장 가까이에 있는 Provider로부터 값을 읽어냅니다. defaultValue는 초기화할 때 넘기는 값으로, Provider를 찾지 못 했을때만 쓰이는 값입니다. 주로 컴포넌트를 독립적으로 테스트할 때 사용합니다.

Context.Provider

<MyContext.Provider value={}>

Provider는 context를 구독하는 여러 컴포넌트들에게 context의 변화를 알립니다. props를 통해서 값을 내려보낸다면 통과하는 모든 컴포넌트들에서 리렌더링이 발생하지만, Provider로 내려보낸다면 sholudComponentUpdate가 발생하지 않기 때문에 consumer(contextType, useContext를 포함)들만 리렌더링 됩니다. 이때 변화 여부는 Object.is 와 동일한 알고리즘을 사용합니다.

Context.Consumer

context의 변화를 구독하는 컴포넌트로 이 컴포넌트를 사용하면 함수 컴포넌트안에서 context를 사용할 수 있습니다.

<MyContext.Consumer>
	{value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

Context.displayName

Context 객체는 displayName문자열 속성을 설정할 수 있습니다. React 개발자 도구에서 설정한 이름으로 볼 수 있습니다.

주의사항

다시 렌더링할지 여부를 정할 때 참조를 하기 때문에 불필요한 렌더링이 발생할 수 있습니다. 이럴 땐 state에 값을 넣어서 관리하면 됩니다.

<MyContext.Provider value={{sometime: 'sometimes'}}>
	...
</MyContext.Provider>

const [somtimes, setSomtimes[ = useState();

<MyContext.Provider value={{sometime}}>
	...
</MyContext.Provider>