컴포넌트 통신

Jung taeWoong·2021년 5월 23일

React.js

목록 보기

9/19

컴포넌트 통신

컴포넌트는 로컬 데이터인 state(상태)를 가질 수 있다.
React 프로그래밍시에는 상위 컴포넌트가 공유가 필요한 state를 관리하고
하위 컴포넌트는 부모 컴포넌트와 통신하여 state를 공유한다.
즉, props객체를 통해 상위 컴포넌트의 state를 하위 컴포넌트에 전달

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

메서드(함수) 전달

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

class ParentComponent extends Component

state = {
  name: 'woong',
}

handler = (name) => {
  this.setState({name: name});
}

render() {
  return (
    <div className="parent">
      <Child onCallback={this.handler} />
    </div>
    )
}

const Child = ({ onCallback }) => (
  <button type="button" onClick={() => onCallback('tack')}>
    Click하면 상위 컴포넌트의 상태가 업데이트!
  </button>
  )

상태 공유 문제

애플리케이션은 많은 컴포넌트가 상태를 가지고 있거나 다른 컴포넌트와 공유해 상호 작용 되어야 한다.
props, callback을 활용한 컴포넌트 통신 방법은 컴포넌트 간 depth가 깊어질수록 관리가 어렵다.

자신의 state를 하위 컴포넌트에 전송 -> 전송 -> 전송,
하위 컴포넌트에서 상위 컴포넌트로 콜백 <- 콜백 <- 콜백해 복잡하고 어려워진다.
즉, 컴포넌트 간 관계가 복잡해지면 props callback은 관리가 어려워짐!

상태 공유 문제 해결 방법

앱 규모가 커지면 컴포넌트 트리구조가 복잡해지면서 props,callback만으로 앱 상태관리가 힘들어진다.
다음의 방법들로 state를 효과적으로 관리

1. 컨텍스트(Context) 활용

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