가끔 일부 컴포넌트가 동일한 변경 데이터를 보여줘야 할 필요가 있습니다. 이럴 때 공통 조상에 state를 끌어올리는 걸 권장합니다
위코드를 조상이라고 가정해봅시다!
조상이 자식들에게 물려줄수가 있는데 chid1 ,child2 가 있습니다.
chid1,child2는 조상에게 물려받기 위해 props로 내려 받고 있습니다.
조상님이 버튼을 클릭하면 카운트가 올라가면서 두명의 자식에게 동시에 카운트를 전달하게 됩니다.
React에서 변경되는 모든 데이터에 대한 단일 “신뢰 가능한 소스”가 있어야합니다. 일반적으로 state는 렌더링을 위해 필요한 컴포넌트에 처음 추가됩니다. 그런 다음 다른 컴포넌트에서도 그 state를 필요로 하면, 가장 가까운 공통 조상으로 state를 들어 올릴 수 있습니다. 다른 컴포넌트 간의 state를 동기화하는 대신, top-down 데이터 플로우 에 의존할 수 있습니다.
state를 올리는 것은 two-way 바인딩 접근방식보다 더 “보일러플레이트” 코드를 작성하지만 그 이점으로 버그를 찾고 격리하는 작업이 줄어듭니다. 특정 컴포넌트에 모든 state가 “존재”하고 컴포넌트만 변경될 수 있기 때문에, 버그가 나타날 수 있는 표면적이 크게 줍니다. 또한 유저 입력을 거부하거나 변형하는 커스텀 로직을 구현할 수도 있습니다.
오!