on
state를 부모님께 드리자
state 끌어올리기
리액트에서 데이터는 단방향으로 흐르게 된다.
부모에게서 자식에게로 props로 전달되게 되는데 가끔은 동일한 state를 형제 컴포넌트가 필요한 경우가 있다.
이런 경우에는 형제 컴퍼넌트에 props로 데이터를 전달할 수가 없게 되는데, 이럴때 필요한게 state 끌어올리기다.
즉 부모 컴포넌트로 state를 옮겨놓고 부모 컴포넌트에게서 자식 컴포넌트들에게 props로 전달하여 동일한 state를 형제 컴포넌트와 같이 사용하는 것이다.
리액트 공식 문서에서는 아래와 같이 말하고 있다.
React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 “진리의 원천(source of truth)“을 하나만 두어야 합니다. 보통의 경우, state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가됩니다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 됩니다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천합니다.
state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 “보일러 플레이트” 코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있습니다. 어떤 state든 간에 특정 컴포넌트 안에서 존재하기 마련이고 그 컴포넌트가 자신의 state를 스스로 변경할 수 있으므로 버그가 존재할 수 있는 범위가 크게 줄어듭니다. 또한 사용자의 입력을 거부하거나 변형하는 자체 로직을 구현할 수도 있습니다.