React의 방식으로 앱 개발하기

1. 컴포넌트 단위로 쪼개어 UI를 만든다.
2. 각 컴포넌트의 시각적 상태(state)를 묘사한다.
3. 컴포넌트를 서로 연결하여 컴포넌트 간의 데이터의 흐름을 설계한다.

조금더 구체적으로 살펴보면 다음 다섯단계로 나눌 수도 있다. (해당 문서의 목차와 같다)

1. Break the UI into a component hierarchy
2. Build a static version in React
3. Find a minimal but complete representation of UI states
4. Identify where your state should live
5. Add inverse data flow

이처럼 리액트를 사용한 개발은 디자이너가 앱을 디자인 하는 방식과 비슷하게 개발을 접근하기 때문에 UI 개발을 할때 DX관점에서 강점이 있다.

• 즉 React는,
  1. UI를 컴포넌트 단위로 개발
  2. state를 이용하여 UI를 표현 (declarative programming) Managing State
  • 하기 때문에, 디자이너의 관점으로 UI를 개발할 수 있고, 이는 협업과 DX 측면에서 강점이 있다. 고 볼 수 있다.

Step 5: Add inverse data flow

• setFilterText 라는 setter 함수를 직접적으로 onFilterTextChange 라는 props에 event handler처럼 넣는 모습. 이것도 신기하네 이렇게 할 수도 있구나. handler 함수를 따로 만드는게 아니라 바로 setter 함수를 집어 넣을수도 있겠네.
  • 물론 props를 받는 하위 컴포넌트에서(SearchBar 컴포넌트) 익명함수를 만들어서 그 안에 사용해 주어야 하긴 하지만.