리액트에서 컨텍스트(Context)는 상위 컴포넌트로부터 하위 컴포넌트까지 데이터를 전달하는 기능입니다. 이를 통해 중간에 있는 컴포넌트들이 props를 통해 데이터를 전달하지 않아도 되며, 전역적으로 사용될 수 있는 데이터를 효과적으로 공유할 수 있습니다.

컨텍스트를 사용하는 방법은 다음과 같습니다:

1. 먼저, React.createContext 함수를 사용하여 컨텍스트를 생성합니다.

   const MyContext = React.createContext();
   

2. 상위 컴포넌트에서 컨텍스트를 제공하기 위해 Provider 컴포넌트를 사용합니다. Provider 컴포넌트의 value prop에 전달할 데이터를 지정합니다.

   function ParentComponent() {
     const data = "Hello, Context!";
     return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
     );
   }
   

3. 하위 컴포넌트에서 전달된 컨텍스트 데이터를 사용하기 위해 Consumer 컴포넌트를 사용합니다. Consumer 컴포넌트의 자식은 하나의 함수여야 하며, 이 함수의 매개변수로 컨텍스트 데이터가 전달됩니다.

   function ChildComponent() {
     return (
    <MyContext.Consumer>
      {data => <div>{data}</div>}
    </MyContext.Consumer>
     );
   }
   

4. 만약, 클래스 컴포넌트를 사용한다면 다음과 같이 static contextType을 사용할 수도 있습니다. ```javascript class ChildComponent extends React.Component { static contextType = MyContext;

render() { const data = this.context; return <div>{data}</div>; } } ```

이처럼 컨텍스트를 사용하여 리액트 애플리케이션에서 전역 데이터를 공유하고 전달할 수 있습니다. 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

참조: React Context API