React 개발 방식

React 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 개발

[상향식(bottom-up) 개발] 1.컴포넌트 찾기 : 구조 나누기 2.컴포넌트 생성 : 단일 책임 원칙에 따라 하나의 컴포넌트는 한가지 일만 한다. 3.컴포넌트 조립

장점 : 테스트가 쉽고 확장성이 좋다.

React에서의 데이터 흐름 : 데이터는 위에서 아래로 흐른다.

컴포넌트는 컴포넌트 바깥의 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다.

즉, 데이터를 전달하는 주체는 부모 컴포넌트이며 이는 데이터의 흐름이 하향식(top-down)이며 기본적으로 단방향 데이터 흐름이다.

State 판별 법

모든 데이터를 상태(state)로 둘 필요는 없다. 상태(state)는 최소화하는 것이 가장 좋다. 상태(state)가 많아질수록 애플리케이션은 복잡해진다.

어떤 데이터를 상태(state)로 설정해야 하는지 여부는 다음 세가지 질문을 통해 판단

• 부모로부터 props를 통해 전달되는 경우 state가 아니다.
• 시간에 따라 변하지는 경우 state가 아니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한 경우 state가 아니다.

state 위치 정하기

상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 되니까 크게 어렵지 않지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야 한다.

즉, 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통의 부모 컴포넌트에 상태를 위치해야 한다.

상태 끌어올리기

단방향 데이터 흐름(Top-Down) 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 하지만 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다.

그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 “역방향 데이터 흐름” 처럼 보인다.

이를 해결 하기 위해서는 상위 컴포넌트의 “상태를 변경하는 함수” 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.

이는 여전히 단방향 데이터 흐름에 원칙에 부합하는 해결방법이며 바로 이것이 “상태 끌어올리기” 입니다.