Component Communication

컴포넌트 간 통신 방법

React 컴포넌트의 스코프

클래스 컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 상태(state)를 가질 수 있습니다. 하지만 이 데이터를 다른 컴포넌트와 공유하는 방법이 글로벌 상태 공유 방법과 달리 다소 까다롭습니다.

글로벌 스코프 (Global Scope)

웹 브라우저 환경의 JavaScript는 일반적으로 선언 된 변수나 함수가 전역(global)에서 접근 가능해 공유에 큰 어려움이 없습니다. 하지만 충돌 문제를 야기할 수 있어 전역을 오염시키는 행위를 권장하지 않습니다. 이 문제는 모듈 또는 네임스페이스를 흉내 낸 방식으로 해결했습니다.

스코프 체인 (Scope Chain)

일반적으로 웹 브라우저 환경의 JavaScript는 스코프 체인에 의해 상위(부모) 영역으로 거슬러가 데이터를 참조하지만, React에서는 각 컴포넌트의 상태(데이터)가 스코프 체인되지 않습니다.

컴포넌트 상태 공유

React 프로그래밍 시에는 상위 컴포넌트가 공유가 필요한 상태를 관리하고, 하위 컴포넌트는 부모 컴포넌트와 통신 하여 상태를 공유합니다. 즉, props 객체를 통해 상위 컴포넌트의 상태를 하위 컴포넌트에 전달합니다.

React 공식 문서는 해당 내용을 상태 끌어올리기(Lifting State Up)로 기술하고 있습니다. 필자는 이 표현이 선뜻 이해하기 쉽지 않다고 판단하여, 해당 섹션 이름을 '컴포넌트 간 통신'으로 바꿔 기술합니다.

메서드(함수) 전달

상위 컴포넌트는 props를 통해 하위 컴포넌트에 속성을 전달 할 수 있습니다. 컴포넌트의 메서드(함수) 또한 속성이므로 props로 전달 할 수 있습니다. 예를 들어 상위 컴포넌트 메서드를 하위 컴포넌트에 전달하면 하위 컴포넌트는 전달 받은 메서드를 특정 시점에 실행(callback)하여 상위 컴포넌트의 상태에 접근하여 업데이트 할 수 있습니다.

class Parent extends React.Component {

  state = {
    message: '자식 컴포넌트에서 콜백 실행되면 상태가 업데이트 됩니다.'
  }

  // 2. 자식 컴포넌트에 의해 실행되는 부모 컴포넌트의 메서드
  handler = (newMessage) => {
    // 3. 부모 컴포넌트의 상태 업데이트
    this.setState({ message: newMessage })
  }
  
  render() {
    return (
      <div className="parent">
        // 1. 자식 컴포넌트에 props.onCallback 속성으로 메서드 전달
        <Child onCallback={this.handler} />
        <p>{ this.state.message }</p>
      </div>
    )
  }
  
}

const Child = ({ onCallback }) => (
  <button type="button" onClick={() => onCallback('전달 받은 메서드 콜백!')}>
    클릭 하면 상위 컴포넌트의 상태가 업데이트 됩니다.
  </button>
)

라이브 예제

상태 공유 문제

불행히도 props, callback을 활용한 컴포넌트 통신 방법은 간단한 시나리오를 벗어나면 현실적이지 않습니다. 애플리케이션은 많은 컴포넌트가 상태를 가지고 있거나, 다른 컴포넌트와 공유(동기화)해 상호 작용 되어야 합니다.

하지만 애플리케이션의 상태를 컴포넌트가 개별적으로 소유하다 보니 관리의 어려움이 생기는 겁니다. 자신의 상태를 하위 컴포넌트에 전송 → 전송 → 전송, 하위 컴포넌트에서 상위 컴포넌트로 콜백 ← 콜백 ← 콜백해 복잡하고 어려워집니다. 즉, 컴포넌트 간 관계가 복잡해지면 props, callback은 관리가 어려워 지는 문제가 생깁니다.

상태 공유 문제 해결 방법

앱 규모가 커져서 컴포넌트 트리 구조가 복잡해지면 props, callback 만으로는 앱 상태 관리가 힘들어집니다. 상태 공유를 효과적으로 관리하려면 안내하는 다음의 방법 등을 활용해야 합니다.

1. 컨텍스트(Context) 활용

React는 중첩된 컴포넌트의 데이터 공유 문제를 해결하기 위한 방법으로 컨텍스트(Context)를 제공합니다. Context를 사용하면 컴포넌트 트리로 묶인 컴포넌트 간 데이터 공유가 비교적 수월해집니다. 단, Context는 컴포넌트를 재사용하기 어렵게 만드므로 꼭 필요한 경우만 사용하는 것이 좋습니다.

2. 상태 관리 라이브러리 활용

상태 관리 시스템은 상태 관리의 복잡한 문제를 해결하기 위해 고안되었습니다. 상태를 각 컴포넌트가 소유하는 데서 기인된 문제 해결 방안으로 모든 상태를 하나의 저장소(Store)에서 관리하도록 만드는 것입니다.

이러한 접근 방법은 여러가지 문제를 해결할 수 있습니다. 복잡한 컴포넌트 계층을 위/아래로 탐색하지 않고도 상태를 공유할 수 있기 때문입니다. 대표적인 상태 관리 라이브러리로 Redux, Mobx, Vuex, XState 등이 있습니다.