react.dev/tips/14-communicate-between-components.ko-KR.md

id	title	layout	permalink	prev	next
communicate-between-components-ko-KR	컴포넌트간의 통신	tips	tips/communicate-between-components-ko-KR.html	false-in-jsx-ko-KR.html	expose-component-functions-ko-KR.html

부모-자식 통신을 위해서는, 간단히 props를 넘기면 됩니다.

자식-부모 통신을 위해서는: GroceryList 컴포넌트가 배열로 생성된 아이템 목록을 가지고 있다고 해봅시다. 목록의 아이템이 클릭되면 아이템의 이름이 보이길 원할 겁니다:

var handleClick = function(i, props) {
  console.log('클릭한 아이템: ' + props.items[i]);
}

function GroceryList(props) {  
  return (
    <div>
      {props.items.map(function(item, i) {
        return (
          <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
        );
      })}
    </div>
  );
}

ReactDOM.render(
  <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode
);

bind(this, arg1, arg2, ...)의 사용을 확인하세요: 간단히 handleClick에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠.

부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. componentDidMount()에서 이벤트를 구독하고, componentWillUnmount()에서 해제합니다. 이벤트를 받으면 setState()를 호출합니다. Flux 패턴은 이를 정리하는 방법 중 하나입니다.