[react] Thinking in React

react 공식 튜토리얼 항목 2번째 Thinking in React이다.

간단한 목업을 react를 이용하여 분해 및 설계하는 과정이다.

본문이 길고, vue를 다뤄보면서 경험했던 부분들이라 핵심만 요약해서 적어두도록 한다.

1. UI를 컴포넌트 계층으로 나누기

• 가능하면 1개의 컴포넌트는 1개의 기능만을 담당할것(단일책임)

2. State vs Props / 상향식 vs 하향식 고려하기

• props는 상위 컴포넌트로부터 건내받는 값
• state는 현재 컴포넌트에서 생성하여 변경할 수 있는 값

다음과 같은 경우 state를 사용하면 안된다고 한다.

• 시간에대하여 변화하는 값
• 다른 값들에 의하여 계산하는 값(computed)
  

• 하위 컴포넌트들을 먼저 만들어서 상위 컴포넌트로 합쳐가는 상향식
• 상위 컴포넌트부터 만든 뒤 점점 세세하게 뻗어 나가나는 하향식

3. state의 위치 고려하기

state를 각 컴포넌트에서 사용하는 경우가 일반적이지만, 공통 상위 컴포넌트에 넣는 경우도 있다고 한다.

4. react에는 양방향 바인딩이 없다

react에는 vue의 v-model과도 같은 양방향 바인딩 기능이 없다
onChange를 이용하여서 단방향 바인딩되고 있는 데이터를 갱신해줘야한다.