context API 사용법 1탄

TOC

1. context API

2. 사용 예시

1. context API

react 공식 문서

요약하자면 부모 컴포넌트로부터 저 멀리 자식 컴포넌트까지 props를 넘겨주는 것은 그 깊이가 얕은 경우에야 그냥 넘겨주면 그만이지만 깊이가 깊다면 매우 곤란한 일이 된다.

자식을 계속 타고 넘어가면서 헷갈리는 일이 많아지기 때문이다.

따라서 마치 전역변수처럼 사용이 가능한 context API에 대해 알아보자.

2. 사용 예시

1. 기본적인 사용

새로운 context를 만들어 사용한다면...

import {createContext}from 'react';
const Context=createContext({color:'orange'});
export default Context;

처럼 생성할 수 있다.

이를 사용하는 것은

import React from ‘react‘;
import Context from ‘./Contexts‘;


const Box = () => {
  return (
    <Context.Consumer>
      {value => (
        <div
          style={{
            width: ‘5rem‘,
            height: ‘5rem‘,
            background: value.color
          }}
        />
      )}
    </Context.Consumer>
  );
};
export default ColorBox;

이런식으로 Context를 import하고 property로 Consumer를 사용한다 Consumer를 사용한 경우
컴포넌트 내부에서 jsx로 Render Props를 사용할 수 있는데

    <Context.Consumer>
      {value => (
        <div
          style={{
            width: ‘5rem‘,
            height: ‘5rem‘,
            background: value.color
          }}
        />
      )}
    </Context.Consumer>

바로 중괄호 내부의 부분이다.
value값은 Context.jsx 내부에서 호출되는 CreateContext로 만들어진 객체를 가리키며 위의 경우에는 value.color=orange를 가리키게 된다.

완성하면 이런 모양새가 나온다

const App=()=>{
<>
    <div>
  	  <Box /> // Box 내부에서 Context로 감싸고 있음
    </div>
</>
}

Provider

Provider는 위에서 선언한 Context API의 property로 createContext로 생성한 객체의 변경을 가능하게 한다.

const App=()=>{
<>
 	<Context.Provider value={{color:'red}}>
    <div>
  	  <Box /> // Box 내부에서 Context로 감싸고 있음
    </div>
    </Context.Provider>
</>
}

박스는 Context 컴포넌트를 사용하기 위해 Context.Consumer 태그로 감싸여져 있고,

박스 컴포넌트를 다시 Conetext.Provider로 감싸는 형태이며 여기에 value를 넘겨 Context를 변경하면 자식도 모두 변경된다.

해당 포스트는 책 리액트를 다루는 기술을 보고 정리한 것입니다.