[react] context

리엑트에서 hook을 공부하다가 useContext라는 훅이 있어서 찾아보니 context라는 기능(?)이 있어 공부해봤다.

리엑트에서 state 끌어올리기를 진행하다 보면 사용하지 않는 props들이 전달되어야 하는 일들이 종종 벌어진다. 이를 해결하기 위해 사용하는 것이 context 이며 오늘은 context와 훅인 useContext에 대해 정리해보려 한다.

 

1. context란?

 context는 단계마다 일일이 props를 넘겨주지 않아도 하위 컴포넌트라면 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 해준다. 즉 선언한 위치에서 해당 값을 context로 지정하면 전역적이라고 볼 수 있는 데이터를 공유하게 된다.

예를 들어 웹 페이지에서 흑색 모드와 백색 모드로 화면의 배경 색을 정해주는 기능을 추가한다고 했을 때

context가 없다면 모드의 타입 여부를 배경을 뿌려주는 하위 컴포넌트에 props로 모두 전달해줘야 하는 불상사가 발생한다. 하지만 context를 사용하는 경우 필요한 컴포넌트에서 호출해서 사용하면 되므로 번거로운 작업이 줄게 된다.

 

2. 사용법

 첫 번째로 createContext라는 API를 사용한다.

const MyContext = React.createContext(defaultValue);

위와 같이 사용하면 MyContext라는 context 객체가 생성된다. 여기서 createContext 안에 들어가는 defaultValue는 Provider에서 값을 호출 할 때 원하는 값을 찾지 못하는 경우 쓰이는 값이다.

 

이제 하위 컴포넌트로 전달을 하기 위해서는 Provider를 통해 아래와 같이 value로 값을 전달할 수 있다.

<MyContext.Provider value={/*전달하려는 값 */}>
   //값을 전달하고자 하는 하위 컴포넌트
</MyContext.Provider>

 

Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.

만약 Provider로 전달하는 value prop이 바뀐다면 바뀔 때 마다 하위 컴포넌트들이 재 렌더링이 된다.

 

하위 컴포넌트에서 context를 사용하기 위해서는 클래스 컴포넌트와 함수 컴포넌트 각각 다른 방식을 사용해야 한다.

클래스 컴포넌트의 경우 contextType을 사용하여 가능하다.

class MyClass extends React.Component {
  render() {
    let value = this.context;
    return <div>{value}</div>
  }
}
MyClass.contextType = MyContext;

선언된 클래스 이름에 contextType을 이용하여 원하는 context를 호출하면(현 문서에서는 MyContext를 호출) 해당 context를 this.context를 이용하여 불러올 수 있다.

 

함수 컴포넌트의 경우 Consumer를 이용하여 호출 할 수 있는데 아래와 같이 사용한다.

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

function MyFunction (){
	return <MyContext.Consumer>
  		{value => <div>value</div>}
	</MyContext.Consumer>
}

만약 myContext에서 배열과 같은 값을 보내준다면 map 함수와 같은 반복 함수를 사용하여도 충분히 랜더링이 가능하다.

 

context의 경우 꼭 컴포넌트 내부에서 선언하지 않고 export를 이용하여 호출 받은 뒤 사용도 가능한데

export const ThemeContext = React.createContext();

위와 같이 특정 파일에서 export를 하면

import {ThemeContext} from './context';

class App extends React.Component {
  render() {
	let value = this.context
   	return (
      <div>{value}</div>
    );
  }
}
App.contextType = ThemeContext;

export default App;

필요한 파일에서 context 객체를 호출해와 사용도 가능하다.

 

추가로 hook의 기능이 추가됨에 따라 useContext라는 훅도 추가 되었는데

함수 컴포넌트에서 아래와 같이 호출하는 방식으로 클래스에서 사용하는 방식을 사용할 수 있다.

function ThemedButton() {
  const theme = useContext(ThemeContext); // useContext를 이용하여 ThemeContext 객체 호출
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

 

오늘의 context 정리는 여기까지! 실제로 사용하라고 하면 사용은 가능할 것 같은데

redux와 비교해서 굳이 사용할 필요가 있나 싶은 기능인 것 같다. 하나만 사용하는게 더 직관적일 것 같다랄까?

보다 편리하게 사용하려면 useContext 훅을 사용하여 함수 같은걸 전달받아 state 값을 바꾸는데 사용하지 않을까 싶다.