[React] (리액트 공부하기 34) React Context API

젼이·2025년 1월 18일

리액트 정복하기

목록 보기

34/36

1. React.createContext

React.createContext()는 Context 객체를 생성한다. Context는 컴포넌트 트리 전체에서 데이터를 전역적으로 전달할 수 있게 해준다.

// Context 생성
const MyContext = React.createContext("기본값");

// MyContext는 Provider와 Consumer를 포함하는 객체를 반환한다.

createContext()의 기본값은 Context의 상위에 Provider가 없을 때 사용 된다.

2. Context.Provider

Provider는 Context의 데이터를 설정하고 하위 컴포넌트가 이 데이터를 구독할 수 있게 한다.

function App() {
  return (
    <MyContext.Provider value="공유 데이터">
      <Toolbar />
    </MyContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

value는 Context를 통해 하위 컴포넌트로 전달된다.
Provider를 통해 하위 컴포넌트가 데이터에 접근할 수 있다.

3. Class.contextType

클래스 컴포넌트에서 context를 사용하려면 contextType 속성을 설정해야 한다.

class MyClass extends React.Component {
  static contextType = MyContext;

  render() {
    return <div>Context Value : {this.context}</div>;
  }
}

contextType을 설정하면 this.context를 통해 Context 데이터를 사용할 수 있다.

4. Context.Consumer

Consumer를 사용하면 함수형 컴포넌트에서도 Context 데이터를 구독할 수 있다.

function ThemedButton() {
  return (
    <MyContext.Consumer>
      {(value) => <button>{value}</button>}
    </MyContext.Consumer>
  );
}

Consumer는 함수를 children으로 받으며, value를 통해 Context 데이터를 전달받는다.

5. Context.displayName

displayName 속성을 설정하면 React 개발자 도구에서 Context의 이름이 표시된다.

const MyContext = React.createContext();
MyContext.displayName = "MyCustomContext";

function App() {
  return (
    <MyContext.Provider value="Hello">
      <Toolbar />
    </MyContext.Provider>
  );
}