자식 컴포넌트에서 데이터 전달
부모 컴포넌트는 자식에게 props를 이용해서 데이터를 전달하는데, 자식 컴포넌트는 함수를 이용해서 부모 컴포넌트에게 데이터를 전달할 수 있습니다.
설명을 위한 간단한 예시는 아래와 같습니다.
부모는 state에 people 데이터와 selectedPerson 데이터를 가지고 있습니다.
people데이터는 이름, 나이, 취미의 정보를 포함하고 있습니다. props로 데이터를 받은 자식은 받은 데이터들 중 이름과 나이정보를 화면에 출력합니다.
출력된 데이터를 클릭하면, personClick() 함수에서 클릭된 데이터의 정보를 부모에게 보내주고, 부모는 setState로 selectedPerson을 업데이트 합니다.
자식은 부모에게 받은 selectedPerson의 데이터들 중 이름과 취미를 하단에 출력합니다.
소스는 아래와 같습니다.
Parent
Child
동작 화면은 아래와 같습니다.
이벤트 핸들러에 인수 전달
위의 소스에서 클릭이벤트가 발생하면 인수를 전달하기 위해서 아래와 같이 함수를 호출합니다.
onClick={(e) => this.personClick(e, item)}참고
