인터뷰 질문 - React(9): React의 컨텍스트: 비부모-자식 컴포넌트 통신 구현

React에서 구성 요소 간의 통신은 복잡한 애플리케이션을 구축하는 데 있어 중요한 문제 중 하나입니다. React의 데이터 흐름은 일반적으로 하향식, 즉 상위 구성 요소에서 하위 구성 요소로 전달되지만 때로는 비 상위 구성 요소와 하위 구성 요소 간의 통신을 구현해야 합니다. 이 문제를 해결하기 위해 React는 여러 레벨에 걸쳐 데이터를 전달할 수 있는 메커니즘인 Context를 도입합니다.

1. React의 컨텍스트 개요

Context는 props를 거치지 않고 컴포넌트 트리 전반에 걸쳐 데이터를 공유할 수 있게 해주는 글로벌 상태 관리 솔루션입니다. 컨텍스트는 일반적으로 테마, 사용자 로그인 상태 등과 같은 구성 요소 간의 공통 데이터를 공유하는 데 사용됩니다.

2. 컨텍스트를 사용하여 비부모-자식 구성 요소 통신 구현

Context를 통해 부모가 아닌 컴포넌트와 자식 컴포넌트 간의 통신을 구현할 수 있으며, 구현 단계는 다음과 같습니다.

1. 컨텍스트 생성:

먼저 Context를 생성해야 합니다. 이는 어디에서나 수행할 수 있지만 일반적으로 별도의 파일에 컨텍스트를 정의합니다.

// DataContext.js
import React from 'react';

const DataContext = React.createContext();

export default DataContext;

2. 데이터 제공:

데이터를 공유해야 하는 상위 구성 요소에서는 <DataContext.Provider>데이터를 제공하는 데 사용합니다. 이 공급자는 하위 구성 요소가 제공된 데이터에 액세스할 수 있도록 하위 구성 요소를 래핑합니다.

// ParentComponent.js
import React from 'react';
import DataContext from './DataContext';

class ParentComponent extends React.Component {
  state = { data: 'Hello from parent!' };

  render() {
    return (
      <DataContext.Provider value={this.state.data}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

3. 사용 데이터:

하위 구성 요소에서는 useContext후크 또는 를 통해 Context.Consumer제공된 데이터를 얻을 수 있습니다.

// ChildComponent.js
import React, { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent() {
  const data = useContext(DataContext);

  return <p>Data from parent: {data}</p>;
}