## 상태란?
UI에 동적으로 표현될 데이터입니다. (상태는 변하는 데이터입니다.)
Side Effect란?
함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것입니다. 따라서 컴포넌트 우선 개발 방식에 익숙해져야 합니다.
상태 관리에 앞서 React로 사고하기 읽어보기
1단계: UI를 컴포넌트 계층 구조로 나누기
새로운 함수나 객체를 만들 때 처럼 만들면됩니다. 중요한 점은 단일 책임 원칙입니다. 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 뜻입니다. 하나의 컴포넌트가 커지게 될 경우 이때 작은 하위 컴포넌트로 분리되어야 합니다.
2단계: React로 정적인 버전 만들기
데이터 모델을 렌더링하기 위해서는 다른 컴포넌트를 재사용하는 컴포넌트를 만들고 props를 이용해 데이터를 전달해줘야합니다.
(props는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법입니다.)
이 때 정적 버전을 만들기 위해 state를 사용하면 안됩니다. state는 오직 상호작용을 위해 시간이 지남에 따라 데이터가 바뀌는 것에 사용합니다.
앱을 만들 때 하향식(top-down)이나 상향식(bottom-up)으로 만들 수 있습니다.
구조를 만들 때 상층부에서 부터 만들거나 하층부에 있는 컴포넌트 부터 만들 수 있습니다. 보통은 하향식으로 만드는 게 쉽지만 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하기가 더 쉽습니다.
하나씩 개발을 하다보면 React의 단방향 데이터 흐름(one-way data flow)가 모든 것을 모듈화 하고 빠르게 만들어줍니다.
3단계: UI state에 대한 최소한의 표현 찾아내기
UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야 합니다. 이를 React는 state를 통해 변경합니다.
여기서 핵심은 중복배제 원칙입니다. 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 계산되도록 만들어야 합니다.
- 부모로부터 props를 통해 전달됩니까? state가 아닙니다.
- 시간이 지나도 변하지 않나요? state가 아닙니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가요? state가 아닙니다.
4단계: State가 어디에 있어야 할까?
컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따릅니다. 어떤 state를 가져야 하는 지 바로 결정하기 어려울 수 있습니다.
상태의 두 가지 구분
- 로컬: 특정 컴포넌트 안에서만 관리되는 상태
- 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태
상태를 구분하는 데에는 절대적인 기준이나 법칙이 있는 것은 아니지만, 우리가 처음 JavaScript를 배울 때 처럼 로컬 상태, 전역 상태로 나눠서 접근해보겠습니다.
로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태고, 전역 상태는 프로덕트 전체 혹은 여러가지 컴포넌트가 동시에 관리하는 상태를 말합니다.
JavaScript를 배울 때 전역 변수를 남용하지 않는 것이 좋다고 배웠습니다. 하지만 경우에 따라 전역 상태가 필요합니다.
(그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 출처는 한 곳이어야 합니다. 만약 사본이 있을 경우, 두 데이터는 서로 동기화(sync)하는 과정이 필요합니다. 따라서 한 곳에서 상태를 저장하고 접근하는 것이 좋습니다.)
전역 상태에서의 데이터 무결성
데이터 무결성이란?
데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
동일한 데이터는 반드시 같은 곳에서 가져왕야 합니다. (Single source of truth) 신뢰할 수 있는 단일 출처 원칙은 다양한 곳에서 언급되는 원칙입니다.
데이터가 존재하고, 그 데이터를 보여줘야 하는 곳에서 의도한대로 예외 상황없이 데이터를 잘 보여주어야 할 것입니다. 우리가 보여주고자 하는 데이터가 있다면 그 데이터가 어떤 경우에도 UI상에 잘못 전달되는 일이 없게 만들어야 합니다.
