State 끌어올리기

State 끌어올리기(React 공식문서)

 

https://ko.reactjs.org/docs/lifting-state-up.html

State 끌어올리기 – React

 

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다. 

 

React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 "진리의 원천(source of truth)"를 하나만 두어야 한다.

 

이 말은 곧 동일한 데이터에 대한 state는 한 곳에서 폭포처럼 내려가는 방법이 좋은 방법이라는 뜻이다. 

다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신에 하향식 데이터 흐름에 기대서 코드를 작성하는 것을 공식문서에서 권장한다. 

 

state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 "보일러 플레이트"코드(중복되는 코드)를 유발할 수 있지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있다. 위 공식문서의 예시로 섭씨온도와 화씨온도를 둘 다 state값에 저장하는 대신에 이에 대한 공통점을 추상화한 값만을 저장하면 된다. 그리고 한 필드(섭씨온도)에 대해서 사용자가 입력을 할 때 다른 필드(화씨온도)의 값은 render()메서드 안에서 계산될 수 있게 만든다. 이를 통해 사용자 입력값의 정밀도를 유지한 채 다른 필드의 입력값에 반올림을 지운다던지 추가하는 등 원하는 로직을 입맛대로 변경할 수 있다.