React | Context API 알아보기

Context API는 컴포넌트가 중첩되어 있는 상황에서도 쉽게 속성값(props)를 전달할 수 있게 해준다.

상위 컴포넌트에서 하위에 있는 모든 컴포넌트로 직접 전달이 되니까 직접 반복해서 속성값을 넘겨주지 않아도 됨!

 

1. Context 객체 생성

createContext 함수를 이용해 콘텍스트 객체를 생성할 수 있다.

createContext에 인자값으로 defaultValue를 전달

import React, { createContext } from "react";

const ContextValue = createContext("");

 

2. Provider 컴포넌트로 데이터 전달

Provider를 이용해 데이터를 전달한다.

데이터를 전달받을 컴포넌트는 상위 컴포넌트(Provider 컴포넌트)로 감싸주면 된다.

function App() {
  return (
    <div className="App">
      <ContextValue.Provider value="Hello World!">
        <Text />
      </ContextValue.Provider>
    </div>
  );
}

 

3. 컨텍스트 객체 export

위에서 선언한 컨텍스트 객체를 내보낸다.

* export default는 해당 파일 내에서 한 가지만 내보낸다는 뜻

export { App, ContextValue };

 

4. Consumer를 이용해 데이터 사용

위에서 내보낸 ContextValue를 import해준다!

Consumer로 감싸면, 하위 컴포넌트들은 모두 Provider에서 전달한 값을 사용할 수 있다.

Consumer 컴포넌트는 데이터를 찾기 위해 상위로 올라가면서 가장 가까운 Provider 컴포넌트를 찾는다. 만약 최상위에 도달할 때까지 Provider 컴포넌트를 찾지 못한다면 기본값이 사용된다.

Provider 컴포넌트의 속성값이 변경되면 하위의 모든 Consumer 컴포넌트는 다시 렌더링된다.
출처: 실전 리액트 프로그래밍 (이재승 저)

import React from "react";
import { ContextValue } from "../App";

function Text() {
  return (
    <ContextValue.Consumer>{(value) => <p>{value}</p>}</ContextValue.Consumer>
  );
}

export default Text;

Provider에서 보낸 Hello World!값이 나타났다

 

 

---

 

+) 하위 컴포넌트에서 콘텍스트 데이터 수정하기

 

데이터를 수정하는 함수를 전달하는 SetContextValue 콘텍스트를 생성

const ContextValue = createContext("");
const SetContextValue = createContext(() => {});

 

text를 useState로 선언하고, 기본 값은 "Hello World!"로 입력했다.

그리고 ContextValue에서는 text를 전달하고, SetContextValue에서는 setText 즉 text값을 변경하는 함수를 전달한다.

function App() {
  const [text, setText] = useState("Hello World!");
  return (
    <div className="App">
      <SetContextValue.Provider value={setText}>
        <ContextValue.Provider value={text}>
          <Text />
        </ContextValue.Provider>
      </SetContextValue.Provider>
    </div>
  );
}

 

버튼을 클릭하면 Hi!로 텍스트가 변경된다.

import React from "react";
import { ContextValue, SetContextValue } from "../App";

function Text() {
  return (
    <SetContextValue.Consumer>
      {(setText) => (
        <ContextValue.Consumer>
          {(text) => (
            <React.Fragment>
              <h3>{text}</h3>
              <button onClick={() => setText("Hi!")}>change text</button>
            </React.Fragment>
          )}
        </ContextValue.Consumer>
      )}
    </SetContextValue.Consumer>
  );
}

export default Text;