React 데이터 흐름
- Reat의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작 한다.
- 페이지 구성시 컴포넌트를 만들고, 다시 페이지를 조립해 나간다. 즉, 상향식(buttom-up)으로 앱을 만들게 된다.이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋아진다.
- 상햑식으로 앱을 만들기 때문에 PM 또는 UX 디자이너로부터 앱의 디자인을 전달 받고 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다.
- 컴포넌트의 구조를 나눌땐, 단일 책임 원칙에 따라 구분하게 된다. 하나의 컴포넌트는 한가지 일만 한다는 원칙이다.
props(변하지 않는 값)
- React에서 데이터는 위에서 아래로 흐른다.하양식(top-down) 그리고 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments)혹은 속성(attributes)처럼 전달받을 수 있다.
이말은 즉 컴포넌트에서 데이터를 전달하는 주체는 부모 컴포넌트가 된다는 말이다. - 위 원칙은 매우 중요하다. 단방향 데이터 흐름(one-way data flow)이라는 키워드가 React를 대표하는 설명 중 하나라고 생각 하면 된다.
- 또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알 수 없다.
state(변하는 값)
- 변하는 값 인 state(상태)는 최소화하는 것이 좋다. 그 이유는 상태가 많아질수록 애플리케이션이 복잡해지기 떄문이다. 그래서 어떤 데이터를 상태로 두어야 하는지 기준을 알고 있어야 한다.
state로 두어야 되는 데이터 기준 3가지
- 부모로부터 props를 통해 전달 되는지 -> 전달이 되면 state가 아니다.
- 시간이 지나도 변하는지 -> 변하게 되면 state가 아니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한지 ->가능 하다면 state가 아니다.
역방향 데이터 흐름, 앞에서 Reart는 단방향 데이터 흐름을 갖고 있다고 햇다. 그런데, 역방향 데이터 흐름은 이란 갑자기 뭘까?
- 예를 들어 새로운 게시글이 추가 되는 경우를 들 수 있다. 버튼을 통해 작성하는 게시글의 추가는 부모의 상태(State)를 변화 시키기 떄문이다. 어떻게 하위 컴포넌트 에서의 클릭 이벤트가 부모의 상태를 바꾸었을까?
이를 알기 위해선 State 끌어올리기(Lifting state up)을 알아야 한다. 간단히 정리하자면 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달하는 방법이다.
State 끌어올리기 (Lifting State Up)
- 단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지 알 수 있다.
- 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알 수 가 없다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 이상하게 들릴 수 있다. 그래서 React가 제시하는 해결책은 아래와 같다.
"상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다"
이렇게 하면 여전히 단방향 데이터 흐름 원칙에 부합하면서도, 하위 컴포넌트에서 달라진 값을 상위 컴포넌트로 적용시킬 수 있다.
코딩으로 쓰는 일기장