React Context 사용법

들어가며

회사에서 React를 사용하여 React를 공부하기 시작한지 벌써 5개월. 클래스형 컴포넌트로 state와 props의 연속으로 개발을 하다가 React Hook과 Context를 접하기 시작하며 신세계(!)를 접했었다. 그러나 Context에 대한 더 구체적이고 정확한 개념이 필요할 것 같아 Context 관련해서 정리를 해봐야겠다고 생각했다.

---

참고 링크: React 공식 문서(Context)

Context – React

 

Why Context?

일반적인 React 애플리케이션에서는 데이터는 위에서 아래로(부모 -> 자식) props를 통해 전달되는데, 이러한 과정이 여러번 여러 단계로 거쳐야하는 경우 매우 번거로워지며 유지보수에도 좋지 않습니다. 이럴 경우 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고 전역적(global)으로 데이터를 사용할 수 있습니다.

 

API

1. Context 만들기: React.createContext

const MyContext = React.createContext(defaultValue);

• Context 객체를 만듭니다. 이 객체는 Provider를 통해 전달됩니다.
• defaultValue 매개변수는 적절한 Provider를 찾지 못했을 때만 쓰입니다.

 

2. Context 전달하기: Context.Provider

<MyContext.Provider value={/* 어떤 값 */}></MyContext.Provider>

• Context 객체에 포함된 컴포넌트인 Provider는 context에 접근하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.
• Provider 컴포넌트는 value props를 받아서 이 값을 하위의 컴포넌트에게 전달하며 value props가 바뀔 때마다 다시 렌더링 됩니다.
• Provider의 value는 하위의 모든 Consumer에서 사용할 수 있으며, 이 하위의 Consumer는 Provider의 value가 변경될 때마다 다시 렌더링 됩니다.

Provider로부터 하위 consumer(.contextType와 useContext을 포함한)로의 전파는 shouldComponentUpdate 메서드가 적용되지 않으므로, 상위 컴포넌트가 업데이트를 건너 뛰더라도 consumer가 업데이트됩니다.
-> 이게 무슨 소릴까?

 

3. Context.Provider 전달하기(함수형): Context.Consumer

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

• 함수형 컴포넌트를 사용하는 경우 적용되며, 가장 가까운 Provider의 value를 참조합니다.

 

4. Context 접근하기(클래스형): Class.contextType

class MyClass extends React.Component {
    conponentDidMount() {
        let value = this.context;
        /* MyContext의 값을 이용한 코드 */
    }
    render() {
        let value = this.context;
        /* MyContext의 값을 이용한 코드 */
    }
}
MyClass.contextType = Mycontext;

• class형 컴포넌트를 사용하는 경우, Context 객체를 원하는 클래스의 contextType 속성으로 지정할 수 있습니다.
• 이 경우 클래스 안에서 this.context를 이용해 해당 Context의 가장 가까운 Provider를 찾아 그 값을 읽을 수 있게 됩니다.

 

5. Context 접근하기(Hook): useContext(Context)

const value = useContext(MyContext);

• React Hook에서 Context의 Provider value에 접근할 때 사용되는 방법입니다.
• 이 때 사용되는 인자는 context 객체 그 자체 여야 합니다.
  (ex) useContext(MyContext.Provider) (x)

 

6. Context 이름 변경하기: Context.displayName

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools

• React 개발자 도구에 출력되는 context의 이름을 설정할 수 있습니다.

• displayName 사용한 코드

  

• 기존 출력되던 이름

  

• 변경되어 출력된 이름

  

 

---

마치며

역시 몇 번 개발을 해보고 난 후에 정리를 하니, 처음 접했을 때보다 더 이해가 잘됐다. '아 이래서 이랬던거구나'하는 깨달음(?)도 얻었고 처음 알게된 사실들도 많았다. 다음 포스팅은 이런 Context를 나는 어떻게 사용하는지에 대한 예제를 다루고자 한다. 그럼 이만 👋🏻