React 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

리액트를 사용하다 보면 컴포넌트 간에 데이터를 전달할 일이 많이 생긴다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 다음과 같이 props를 이용해 간단하게 전달할 수 있다.

// 부모 -> 자식 예시
<DetailPage data={modalData} />

그러나 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때는 useState로 setter를 설정해 setter를 전달해주는 일련의 과정이 필요하다. 과정은 다음과 같다.

1. 부모 컴포넌트에서 useState를 통해 전달받을 데이터를 저장할 변수와 setter를 선언한다.
2. 자식 컴포넌트에 props로 setter를 전달한다.
3. 자식 컴포넌트에서는 props.setter를 이용해 데이터를 저장한다.

// 부모 컴포넌트
<DetailPage setId={setId} />

// 자식 컴포넌트
...
onChange={(i) => props.setId(data[i].id)}
...