[React] Context 사용 방법 및 예제

  

 

Context란?

리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다.

<A props={somthing}>
  <B props={somthing}>
    <C props={somthing}>
      <D props={somthing}/>
    </C>
  </B>
</A>

 

A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다.

 

이러한 props drilling을 극복하기 위해 등장한 개념이 바로 Context입니다. Context를 사용하면, 이러한 명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 있습니다.

[Context 객체 생성]

const { myContext } = React.createContext(defaultValue);

• 파라미터 defaultValue는 트리 구조안에 적절한 provider를 찾지 못했을 때 쓰이는 값입니다.

[Context.Provider]

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

• Provider는 정의한 Context를 하위 컴포넌트로 전달해 주는 역할을 합니다.
• 값을 전달할 때는 value 어트리뷰트를 사용하여 전달해야 합니다.
• provider 하위에 context를 가진 component는 provider의 value가 변화할 때마다 다시 렌더링 됩니다.
• shouldComponentUpdate메서드의 적용을 받지 않으므로 상위 component가 업데이트를 건너뛰더라도 Consumer가 업데이트됩니다.

[Context.Consumer]

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

• Context 변경을 구독하는 컴포넌트 입니다.
• value함수에 전달 된 인수 value는 트리 위의 Context 에 가장 가까운 Provider의 prop과 같습니다.
• 이 Context에 대한 Provider가 없는 경우 value인수는 defaultValue에 전달된 인수와 동일 합니다.

---

Context 예제

App.js

import './App.css'; 
import ContextApi from './Component/ContextApi'; 

function App() { 
    return ( 
        <div> 
           <h1 className="App-header"> 
               <ContextApi/> 
           </h1> 
        </div> 
    ); 
}

export default App;

ContextApi.js

import React from 'react'; 
import Children from "./contextChildren"; 

// CreateContext 호출 
const { Provider, Consumer } = React.createContext(); 

// 하위 컴포넌트에서 Consumer를 사용할 수 있도록 export 
export { Consumer } 

class ContextApi extends React.Component { 
      render() { 
           return( 
               // 자식 컴포넌트를 <Provider> 태그로 감싸고 전달할 데이터를 value 값으로 할당 
               <Provider value="코딩병원119"> 
                   <Children /> 
               </Provider> 
           ) 
      } 
} 

export default ContextApi;

ContextChildren.js
이 컴포넌트에서는 부모 컴포넌트의 데이터를 사용하지 않고 손자 컴포넌트 contextChildren2를 return 합니다.
이때 손자 컴포넌트에서 사용할 데이터를 전달하지 않아도 됩니다.

import React from 'react'; 
import Children2 from "./contextChildren2"; 

class contextChildren extends React.Component { 
      render() { 
           return( 
                <Children2/> 
           ) 
      } 
} 

export default contextChildren;

ContextChildren2.js
ContextApi 컴포넌트에서 value에 할당했던 데이터를 contextValue라는 변수로 받아 출력합니다.

import React from 'react'; 
import { Consumer } from "./ContextApi"; 

class contextChildren2 extends React.Component { 
    render() { 
        return( 
            <Consumer> 
                {contextValue=> <h3>{`contextValue: ${contextValue}`}</h3>} 
            </Consumer> 
        ) 
    } 
} 

export default contextChildren2;

실행 결과

Context를 사용하면 하위 컴포넌트가 여러 개인 구조에서 유용하게 사용할 수 있습니다. 몇 번째 하위 컴포넌트인지와는 상관없이 필요한 하위 컴포넌트에서 Consumer를 Import해 필요한 데이터를 사용할 수 있습니다.



Reference

react.org

useContext 사용법 및 예제