[React공식문서 읽기] Context

React Application을 개발하다 보면 컴포넌트에 데이터를 전달해야 될 경우가 있다.

그러다 보면 3번째 level의 컴포넌트에서 30번째 level의 컴포넌트까지 데이터를 전달해야 될 경우도 있을것이다...?

그러면 일일이 3->4->5->6->7-> .... -> 30 까지 데이터를 전달해야된다;

이렇게 개발할 경우 유지 보수할 때 다른사람은 물론 개발한 사람도 못 알아본다.

 

Context를 이용하면 Componente간 props로 넘겨주지 않고 전역적으로 데이터를 전송할 수 있다.

3 -> 30 바로 전달이 가능하다.

어떤 데이터를 Context를 이용하여 관리하는 것이 좋을까?

Context는 Application 내 전역적으로 관리해야 할 데이터를 공유 할 수 있도록 고안된 방법이다.

예를 들면 유저가 로그인을 했을 경우 유저 정보를 전역적으로 관리할 수 있을 것이다. 그리고 화면테마(Light/Dark), 언어 설정 등을 관리할 수 있다.

 

Context를 아래와 같이 설정하여 사용할 수 있다.

import React from 'react';

const GlobalDataContext = React.createContext('global');

function App(){
  return(
    <GlobalDataContext.Provider value="global">
       <Child/>
    </GlobalDataContext>
  )
}

function Child(){
  return{
    <>
       <ChildChild/>
    </>
  }
}

function ChildChild(){
  const globalData = useContext(GlobalDataContext);
  return(
	<div>{globalData}</div>
  )
}

Context 사용시 고려할 점

context의 주된 용도는 다양한 level의 컴포넌트에 데이터를 전달하기 위함이다.

context를 사용시 컴포넌트 재사용이 어려워 지므로 필요시만 쓰도록 하자. 

상황에 따라 컴포넌트 합성을 통해 해결하거나, 컴포넌트 자체를 넘겨주어 context를 사용하지 않을 수도 있지만 상황에 따라 적절히 쓰는것이 중요하다.

API

React.createContext(defaultValue);

 - Context객체를 만든다.

 - Context를 subscribe하고 있는 컴포넌트를 rendering할 때 React는 트리 상위의 가장 가까이 있고 짝이 맞는 Provider로 부터 현재 값을 읽는다.

 - defaultValue는 적절한 Provider를 찾지 못했을 때만 쓰이는값이다.

 - Provider를 통하여 undefined를 값으로 보낸다고 하더라고 구독 컴포넌트들이 defaultValue를 읽지는 않는다는 점 유의할 것.

Context.Provider

 - Context 오브젝트에 포함된 react component이다.

 - Context를 subscribe하는 components에 context의 변화를 알린다.

 - Provider컴포넌트는 value prop를 받아서 이 값을 하위에 있는 또 다른 Provider에 배치할 수도 있다.

 - Provider로부터 하위 consumer로의 전파는 shouldComponentUpdate method가 적용되지 않으므로 상위 component가 업데이트를 건너뛰므로 consumer가 업데이트 된다.

 - Context값이 바뀌었는지 여부는 Object.is와 동일한 알고리즘이다.

Class.contextType

 - React.createContext()로 생성한 Context객체를 원하는 클래스의 contextType properties로 지정 할 수 있다.

 - 이 properties를 이용하여 class내 this.context를 이용해 해당 Context의 가장 가까운 Provider를 찾아 그 값을 읽을 수 있다. 이 값은 모든 컴포넌트 생명 주기 method에서 사용할 수 있다.

 - contextType을 사용할 경우 하나의 context만 subscribe할 수 있다.

Context.Consumer

 - Context 변화를 구독하는 컴포넌트 이다.

const TmpContext = React.createContext("test");

<TmpContext.Consumer>
	{value => /* context값을 이용한 rendering */}
</TmpContext.Consumer>

 - Context.Consumer의 자식은 함수여야 하며, 이 함수는 context의 현재 값을 받고 React node를 반환한다.

 - 위 코드의 value parameter값은 해당 Context의 Provider중 상위 트리에서 가장 가까운 Provider의 value prop과 동일하다. 상위에 Provider가 없다면 defaultValue이다.

Context.displayname

 - Context객체는 displayName문자열 속성을 설정할 수 있다.

 - React개발자 도구는 해당 문자열을 사용하여 context를 어떻게 보여줄 지 결정 한다.

const TestContext = React.createContext("test");
TestContext.displayName = 'TestDisplayName';

<TestContext.Provider> //개발자 도구에서 TestDisplayName.Provider으로 출력됨
<TestContext.Consumer> //개발자 도구에서 TestDisplayName.Consumer으로 출력됨

 

주의사항

ReRendering 여부를 정할 때 참조(reference)를 하므로 Provider의 부모가 Rendering될 때 마다 불필요하게 하위 컴포넌트가 ReRendering되는 문제가 발생할 수도 있다.

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

이를 방지하기 위해, 값을 부모의 state로 끌어올리기 한다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

 

참고 : ko.reactjs.org/docs/context.html#contextconsumer

Context – React