종종 동일한 데이터에 대한 변경사항을 여러 Component에 반영해야 할 필요가 있습니다. 이럴 대는 가장 가까운 공통 조상으로 state를 끌어 올리는 것이 좋습니다.

이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다.

CodePen에서 예제 보기

교훈

state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 “보일러 플레이트”코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있습니다.

어떤 state든 간에 특정 Component 안에서 존재하기 마련이고 그 Component가 자신의 state를 스스로 변경할 수 있으므로 버그가 존재할 수 있는 범위가 크게 줄어듭니다. 또한 사용자의 입력을 거부하거나 변형하는 자체로직을 구현할 수도 있습니다.

어떤 값이 props 또는 state로부터 계산될 수 있다면, 아마도 그 값을 state에 두어서는 안 됩니다.

예를 들어 celsiusValue 와 fahrenheitValue 를 둘 다 저장하는 대신, 단지 최근에 변경된 temperature와 scale 만 저장하면 됩니다.

다른 입력 필드의 값은 항상 그 값들에 기반해서 render() 메서드 안에서 게산될 수 있습니다.

이를 통해 사용자 입력값의 정밀도를 유지한 채 다른 필드의 입력값에 반올림을 지우거나 적용할 수 있게 됩니다.