📖 Component Communication

1. Component Communication 정의

👉 Component Communication 의미는 컴포넌트 통신이다. React 클래스 컴포넌트는 컴포넌트 내에서만 접근 가능한 상태(state)를 가질 수 있어 관리가 용이하지만, 컴포넌트가 중첩되더라도 각 컴포넌트마다 개별적으로 상태를 관리하므로 상태를 공유하는 것이 까다롭다.

📌 JavaScript는 스코프 체인에 의해 상위(부모) 영역으로 거슬러 올라가 데이터를 참조하지만, React 프로그래밍에서는 각 컴포넌트의 상태(데이터)가 스코프체인 되지 않는다. 그러므로 효과적으로 관리하기 위해서는 React 프로그래밍에서 상위(부모) 컴포넌트가(공유가 필요한) 상태를 관리하고, 자손(하위) 컴포넌트와 통신(Communication)하여 상태 공유하여 처리한다.

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

2. props ⇌ callback

👉 전달 속성(props)를 사용해 부모 컴포넌트는 자식 컴포넌트에 속성을 전달할 수 있다. 바꿔 말하면 자식 컴포넌트는 부모 컴포넌트로 부터 속성을 전달 받을 수 있다. 컴포넌트의 메서드 또한 속성이므로 props로 전달할 수 있다. 예를 들어 부모 컴포넌트의 메서드를 자식 컴포넌트에 전달하면 자식 컴포넌트는 전달 받은 메서드를 실행(callback)해 부모 컴포넌트의 상태를 변경할 수 있다.

3. 부모 ➡︎ 자식 (메서드 전달)

👉 자식 컴포넌트에 전달된(1) 부모 컴포넌트 메서드(2)는 자식 컴포넌트에 의해 실행되면 부모 컴포넌트의 상태를 업데이트(3) 한다.

✍ Exmple

class ParentComponent extends Component {
  state = {
    message: '자식 컴포넌트의 요청을 대기 중'
  };

  processRequested = (message) => {
    this.setState({ message });
  }
  render() {
    return (
      <div className="parent">
        <ChildComponent receivedMethod={this.processRequested} />
        <p>{ this.state.message }</p>
      </div>
    )
  }
}

4. 부모 ⬅︎ 자식 (메서드 실행)

👉 자식 컴포넌트는 state를 가질 필요가 없으므로 '함수형'으로 작성한다. 눈여겨 볼 부분은 부모 컴포넌트가 전달한 속성 props.receivedMethod 유형이 메서드라는 점이다. 사용자에 의해 이벤트가 발생(버튼 요소 클릭) 하면 전달 받은 부모 컴포넌트의 메서드를 실행해 부모 컴포넌트의 state를 교체한다.

✍ Exmple

const ChildComponent = (props) => {
  return (
    <button
      type="button"
      onClick={ () => props.receivedMethod('전달 받은 메서드 잘 사용!'); }
    >
      부모 컴포넌트의 상태를 바꿔봅시다!
    </button>
  )
}

5. props ⇌ callback 문제

👉 자신의 컴포넌트를 하위 컴포넌트에 전송 → 전송 → 전송, 다시 하위 컴포넌트에서 상위 컴포넌트로 콜백 ← 콜백 ← 콜백 하니 복잡하고 어려워진다.컴포넌트 간 관계가 복잡해지면 props, callback은 관리가 매우 어려워진다.

6. 컨텍스트(Context)활용

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

7. 상태 관리 필요성

👉 상태 관리 시스템은 상태 관리의 복잡한 문제를 해결하기 위해 고안되었다. 상태를 각 컴포넌트가 소유하는데서 기인된 문제 해결 방안으로 모든 상태를 하나의 저장소(Store)에서 관리하도록 만드는 것이다. 이러한 접근법은 여러가지 문제를 해결할 수 있다. 복잡한 컴포넌트 계층을 위/아래로 탐색하지 않고도 상태를 공유할 수 있기 때문이다. 대표적인 상태 관리 라이브러리로 Redux, Mobx, Vuex 등이 있다.