React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위
-
먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다
-
즉,
상향식(bottom-up)으로 앱을 만든다
이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다
(위쪽을 지향하는 방식) -
컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다
ex) 컴포넌트는 트리형태로 되어있다
하나의 컴포넌트는 한가지 일만 한다
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다
데이터를 전달하는 주체는 부모 컴포넌트가 되며, 이는 데이터 흐름이 하향식(top-down)임을 의미한다 (위쪽에서 결정되어 아래로 전달하는 방식)
위 방식들이 React가 단방향 데이터 흐름(one-way data flow)이라는 대표하는 설명 중 하나이다
변하는 값과, 변하지 않는 값은 무엇인가 생각해본다
사용자 입력은 이벤트에 따라 얼마든지 변할 수 있다, 이것은 상태(state)다
ex) 트윗터
트윗 목록 안에 트윗 들이 있다, 즉 트윗목록이 부모 컴포넌트이고 자식 컴포넌트로 트윗들이 있다고 생각해 보자
트윗 목록이 추가 또는 삭제될 여지가 없다면 사실 state로 둘 필요가 없다
그러나, 우리는 새 트윗 추가라는 기능을 염두해두고 있으므로, 트윗 목록 역시 상태(state)이다, 즉 트윗이 추가되고 삭제되면서 목록도 변경되기 때문이다
어떤 데이터를 상태로 두어야 하는 가?
모든 데이터를 상태로 둘 필요는 없다
상태는 최소화하는 것이 가장 좋다
상태가 많아질수록 애플리케이션은 복잡해진다
부모로부터 props를 통해 전달되는가? 그러면 확실히 state가 아니다시간이 지나도 변하지 않는가?그러면 확실히 state가 아니다컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?그렇다면 state가 아니다
"State 끌어올리기(Lifting state up)"
하위 컴포넌트(NewTweetForm)에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황에 사용된다
상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다, 콜백 함수를 사용하는 방법과 비슷하다
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다
