[React]-React로 사고하기

본문은 React Document 를 바탕으로 작성하였다.

React로 사고하기

1단계 : UI를 컴포넌트 계층 구조로 나누기

어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까?

• 새로운 함수나 객체를 만들 때 처럼 만들면 된다.
• 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적 이라는 원칙이다.

2단계 : React로 정적인 버전 만들기

• 컴포넌트 계층 구조가 만들어 졌으니 앱을 실제로 구현해 볼 시간이다. 가장 쉬운 방법은 데이터 모델을 가지고 UI만 렌더링 하고 아무런 동작도 없는 버전을 만들어 보는 것 이다.

• 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 동작들이 수행되는 상호작용을 만드는 것은 생각은 많이 필요하지만 타이핑은 적게 필요하다. 따라서 먼저 정적 버전을 만들어 보는게 좋다.

• 다른 컴포넌트를 재사용 하는 컴포넌트를 만들고 props를 이용해 데이터를 전달한다. 다만 주의해야 할 점은 정적인 버전을 만들기 위해 state는 사용하지 말 것. 이다. state는 오직 상호작용을 위해(시간이 지남에 따라 데이터가 바뀌는 것) 사용 한다.

• 앱을 만들때 하향식(top-down) 과 상향식(bottom-up) 방식이 있는데, 하향식은 최상위 컴포넌트 부터 시작해서 내려오는 방식이고, 상향식은 하위 컴포넌트 부터 시작해서 올라오면서 만드는 방식이다.

  • 보통 하향식으로 만드는게 쉬우나, 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하는게 더 쉽다.

• 이 단계가 끝나면 데이터 랜더링을 위해 만들어진 재사용 가능한 컴포넌트들의 라이브러리를 가지게 된다. 현재의 앱은 정적 버전이기 때문에 render()메서드만 가지고 있을 것이다. 계층 구조의 최상단 컴포넌트는 prop으로 데이터 모델을 받는다. 데이터 모델이 변경되면 ReactDOM.render()를 다시 호출해 UI가 업데이트 된다. 이런 React의 단방향 데이터 흐름(one-way data flow) (또는 단방향 바인딩(one-way binding)) 은 모든 것을 모듈화 하고 빠르게 만들어 준다.

State와 props은 React의 두가지 데이터 모델이다. State는 컴포넌트 내부에서 관리 되고 props은 컴포넌트 외부에서 관리된다. 참고 링크

3단계 : UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

• UI를 상호작용하게 만들때 React는 state 를 통해 데이터 모델을 변경한다.

• 앱을 올바르게 만들기 위해서는 앱이 필요로 하는 최소한의 변경 가능한 state 집합 을 생각해 보아야 한다.

• 어떤 데이터가 state가 되어야 하는지는 아래의 세가지 질문을 통해 정할 수 있다.

  1. 부모로 부터 props을 통해 전달되는가? 그렇다면 state가 아니다
  2. 시간이 지나도 변하지 않는가? 그렇다면 state가 아니다.
  3. 컴포넌트 안의 다른 state나 props을 가지고 계산이 가능한가? 그렇다면 state가 아니다.

4단계 : State가 어디에 있어야 할 지 찾기

• 3단계 까지는 앱에서 최소한으로 필요한 state가 뭔지 찾아내었다. 다음으로는 어떤 컴포넌트가 state를 변경하거나 소유 할지 찾아야 한다.
• _주의 : React는 항상 컴포넌트 계층 구조를 따라 아래로 내려가는 *_단방향 데이터 흐름** 을 따라간다. 어떤 컴포넌트가 어떤 state를 가져야 하는지 밑의 과정을 따라서 결정해 보자.
  1. state를 기반으로 렌더링 하는 모드느 컴포넌트를 찾은 후
  2. 공통 소유 컴포넌트(common owner component)를 찾아라. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트)
  3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
  4. state를 소유할 적절한 컴포넌트를 찾지 못하였다면 state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가 할 것.

5단계 : 역방향 데이터 흐름 추가하기

• 지금까지 우리는 계층 구조 아래로 흐르는 props와 state 을 알아보았다. 이제 다른 방향의 데이터 흐름을 만들어볼 차례이다. 계층 구조의 하단에 있는 폼 컴포넌트에서 상위 컴포넌트의 state를 업데이트 할 수 있어야 한다.
• 우리는 사용자가 폼을 변경할 때 마다 사용자의 입력을 반영할 수 있도록 state를 업데이트 하기를 원한다. 컴포넌트는 자신의 state만 변경할 수 있기 때문에 callback 함수를 이용한다.
• 상위 Component는 하위 Component에 callback을 넘겨서 state가 업데이트 되어야 할 때 마다 호출하도록 만들어야 한다.