intro
- React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다
물론 알다시피 이 방법은 테스트가 쉽고 확장성이 좋다는 장점이 있음.
- 그래서 컴포넌트를 먼저 만들고 페이지로 조립하는 상향식으로 만듦. (
단 데이터는 위에서 아래로 흐르는 하향식인데 이 원칙을 단방향 데이터 흐름이라고 부름
또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함!
데이터 정의
- 자. 데이터가 무엇인지 먼저 정의하자.
트위터를 만든다고 했을때 우리가 가질 데이터의 예시로 다음이 있다고 하자
전체 트윗 목록
사용자가 작성중인 새로운 트윗 내용
이중에 트윗 목록은 가변적이므로 상태(state)일 것 이다.
여기서 상태는 많으면 많을수록 애플리케이션이 복잡해진다.
그러면 어떤 데이터를 상태로 두어야 하는가?
- 부모로부터 props를 통해 전달되지 않는것
- 시간이 지남에 따라 변하는 것
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하지 않은것!
- 제품의 원본 목록
- 유저가 입력한 검색어
- 체크박스의 값
- 필터링 된 제품들의 목록
제품의 원본 목록은 props를 통해 전달되므로 state가 아님.
검색어와 체크박스는 state로 볼 수 있는데 시간이 지남에 따라 변하기도 하면서 다른 것들로부터 계산될 수 없기 때문임.
필터링된 목록은 state가 아닙니다. 제품의 원본 목록과 검색어, 체크박스의 값을 조합해서 계산해낼 수 있기 때문
결과적으로 애플리케이션은 다음과 같은 state를 가짐
- 유저가 입력한 검색어
- 체크박스의 값