종종 동일한 데이터에 대한 변경사항을 여러 Component에 반영해야 할 필요가 있습니다. 이럴 대는 가장 가까운 공통 조상으로 state를 끌어 올리는 것이 좋습니다.
이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다.
React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 “진리의 원천(source of truth)”를 하나만 두어야 합니다.
→ input 의 value 에는 변경되면 변경된 값이 그대로 반영되는 변수 하나만 지정해야 한다.
보통의 경우, state는 렌더링에 그 값을 필요로 하는 Component에 먼저 추가됩니다. 그러고 나서 다른 Component도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 조상으로 끌어올리면 됩니다.
다른 Component 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천합니다.
state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 “보일러 플레이트”코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있습니다.
어떤 state든 간에 특정 Component 안에서 존재하기 마련이고 그 Component가 자신의 state를 스스로 변경할 수 있으므로 버그가 존재할 수 있는 범위가 크게 줄어듭니다. 또한 사용자의 입력을 거부하거나 변형하는 자체로직을 구현할 수도 있습니다.
어떤 값이 props 또는 state로부터 계산될 수 있다면, 아마도 그 값을 state에 두어서는 안 됩니다.
예를 들어 celsiusValue 와 fahrenheitValue 를 둘 다 저장하는 대신, 단지 최근에 변경된 temperature와 scale 만 저장하면 됩니다.
다른 입력 필드의 값은 항상 그 값들에 기반해서 render() 메서드 안에서 게산될 수 있습니다.
이를 통해 사용자 입력값의 정밀도를 유지한 채 다른 필드의 입력값에 반올림을 지우거나 적용할 수 있게 됩니다.