상태 끌어올리기

리액트에서 데이터는 아래로 흐른다. 이것으로,

부모/자식 컴포넌트 모두 특정 컴포넌트가 stateless 인지, state를 가지고 있는지 알 수 없다. 또한, 함수든 클래스든 상관하지 않는다. 그래서 state는 캡슐화 라고 불린다. state는 소유한 컴포넌트 외에 절대 접근할 수 없다.

// state를 자식 컴포넌트의 pro으로 전달하기
<FormattedDate date={this.state.date} />

FormattedDate 컴포넌트는 date를 자신의 prop으로 받는 것만 알고 있다. 이 prop이 state인지 상수값인지 부모 컴포넌트의 prop인지 알지 못한다.

위와 같은 방식을 top-down / 단방향 데이터 흐름 이라고 한다.

모든 state는 특정 컴포넌트가 소유하며, 그 state에서 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 아래에 있는 컴포넌트에게만 영향을 미친다.

이와 같이 state는 캡슐화 되어있다. 그리고 컴포넌트들은 데이터를 prop으로 내려받을 수 있는데, 이 데이터의 출처는 모른다. 그냥 prop으로 어떤 데이터를 받는지만 알고 있다. 이것을 단방향 데이터 흐름이라고 한다.

상태 끌어올리기

교훈

리액트 앱에서 변경이 일어나는 데이터는 "source of truth"를 하나만 두어야 한다. 보통 state는 렌더링에 필요로 하는 컴포넌트에 먼저 추가된다. 나중에 다른 컴포넌트에서도 그 값이 필요하면 가장 가까운 공통 조상으로 lifting up state 를 하면된다. top-down 데이터 흐름에 기대야 한다.

lifting up state는 버그를 찾고 격리하기 더 쉽게 만드는 장점이 있다. 어떤 값이 props 또는 state로부터 계산될 수 있다면 그 값을 state에 두어서는 안된다. 예를 들어, celsiusValue와 fahrenheitValue를 둘 다 저장하는 대신, 최근에 변경된 temperature와 scale만 저장하면 된다. 다른 필드의 값은 항상 그 값을 기반하여 render 메서드 안에서 계산되어야 한다. 이를 통해 사용자 입력값의 정밀도를 유지할 수 있다.