8-1. React 데이터흐름 & State 끌어올리기

Must know concepts

• recast.ly 스프린트에 등장하는 컴포넌트에 대해 컴포넌트 트리를 그려볼 수 있나요?
• recast.ly 스프린트에서 App이 클래스 컴포넌트인 이유가 무엇인가요?
  • recast.ly 구조 상 어떤 컴포넌트가 서로 상호작용을 하고 있나요?

---

React 에서의 데이터 흐름

1. 프로토타입에서 컴포넌트 찾기

리액트는 컴포넌트 단위 기준으로 상향식으로 앱을 만든다. 이는 테스트가 쉽고 확장성이 좋다.

기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일

 

2. 트위틀러 예시로 진행

 

1) 컴포넌트

컴포넌트 단위로 나누는 이유? 단일 책임 원칙 즉, 하나의 컴포넌트에 하나의 일만 시키기 위함.

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다.즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이는 데이터 흐름이 하향식(top-down)임을 의미합니다.

 

2) 데이터

!ex) 데이터 갯수 구하는 경우.  this.setState.length 로 계산하여 구할 수 있기 때문에 state가 아니다.

 

애플리케이션에서 필요한 데이터가 무엇인지 먼저 정의합시다. 

 

- 전체 트윗 목록

- 사용자가 작성중인 새로운 트윗 내용

 

이 중에 변하는 값과, 변하지 않는 값은 무엇인가요? 확실히 사용자 입력은 이벤트에 따라 변할 수 있기 때문에 상태(state)입니다. 트윗 목록이 추가 또는 삭제될 여지가 없다면 사실 state로 둘 필요가 없습니다. 그러나, 우리는 새 트윗 추가라는 기능을 염두해두고 있으므로, 트윗 목록 역시 상태(state)입니다.

 

모든 데이터를 상태로 둘 필요는 없습니다. 사실 상태는 최소화하는 것이 가장 좋습니다. 상태가 많아질수록 애플리케이션은 복잡해집니다. 어떤 데이터를 상태로 두어야 하는지 여부는 다음 세가지 질문을 통해 판단해보세요.

- 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.

- 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.

- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

 

부모 컴포넌트가 props로 자식 컴포넌트에게 데이터를 보내줄 경우, '읽기 전용의 데이터' 일 뿐입니다.  변경이 불가함.

 

3) 데이터(상태) 위치 정하기

 

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

새 글을 추가하는 이벤트가 발생할 경우, 이때에 전체 트윗 목록에 새로운 트윗 객체를 추가할 수 있어야 합니다. 즉, 두 컴포넌트 모두 트윗 목록에 의존합니다.두 컴포넌트의 부모는 무엇인가요? 바로 Twittler입니다. 전체 트윗 목록 상태는 여기에 위치합시다.

 

State 끌어올리기 

 

부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것을 발견할 수 있을 것입니다. 바로 새로운 트윗 추가가 대표적인 예죠. 버튼을 통한 이 액션은, 부모의 상태를 변화시켜야 합니다. 이를 해결할 수 있는 키워드는 바로 "State 끌어올리기(Lifting state up)" 입니다.

이는 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있습니다. 이는 마치 콜백 함수를 사용하는 방법과 비슷합니다.

 

How?

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

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

 

1. 일반적인 실행 순서

 

ReactDOM.render 실행되면,

  1) class 컴포넌트의 constructor를 먼저 찾아

  2) this.state 를 확인하고

  3) this.state.value를 render() 한다.

2. 상태 끌어올리기

 

ReactDOM.render 실행된 후,

  1) 값 변경 버튼을 누르면,

  2) handleClick 이 실행된다.

  3) handClick 내부의 handleChangeValue(부모로부터 받은 메소드) 가 실행된다.

  4), this.setState 메소드로 value 값이(상태가) 변경됨.

  5) 4)에 따라 변경.

  6) render