SEB Section 2 React Data

데이터의 흐름

React의 개발 방식은 컴포넌트 단위로 시작한다는 것이 가장 큰 특징이다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터의 흐름이 하향식임을 의미한다. React는 단반향 데이터 흐름이라는 특징을 가지고 있고, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알지 못한다. 이렇게 데이터의 흐름을 알아보았는데, 이제는 데이터를 state를 주어야 하는지를 판별을 해 보아야 한다.

state 판별 방식

• 부모로부터 props를 통해 전달 되나?
• 시간이 지나도 변하지 않나?
• 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가?

이 점을 만족하지 못한다면 state를 줄 필요가 없다.

상태 위치 정하기

상태가 특정 컴포넌트에서만 유의미 한다면 상관이 없겠지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야 한다. 즉 공통 소유 컴포넌트, 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 한다.

역방향 데이터 흐름 추가

하위 컴포넌트에 의해 부모 컴포넌트에서의 상태가 변하느 것을 발견할 수 있는데, 대표적인 것이 트윗 추가하기 이다. 버튼을 통한 이 액션은, 부모의 상태를 변화시켜야 한다. 이것을 State 끌어올리기라 부른다. 이를 해결하기 위해서는 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.