React로 사고하기
목업을 시작으로 총 5단계로 나누어 React 로 사고하는 것을 알아보겠습니다.
목업으로 시작하기
목업은 다음과 같습니다.
json
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
]1단계: UI를 컴포넌트 계층 구조로 나누기
우리의 첫 번째 단계는 UI를 컴포넌트 계층 구조로 분해하는 것입니다. 이는 앱을 작은 조각으로 나누고, 각 조각에 대한 명확한 역할을 정의함으로써 앱의 복잡성을 관리하는 데 도움이 됩니다.
이 단계에서는 모든 컴포넌트와 하위 컴포넌트의 주변에 박스를 그리고 그 각각에 이름을 붙입니다. 이는 컴포넌트를 구조화하여 시각적으로 파악할 수 있도록 합니다. 또한 단일 책임 원칙을 따라 각 컴포넌트가 한 가지 일을 하도록 분리합니다.
2단계: React로 정적인 버전 만들기
다음 단계는 데이터 모델을 사용하여 정적인 버전의 앱을 만드는 것입니다. 이 버전은 사용자 입력에 반응하지 않고, 단순히 데이터를 화면에 렌더링합니다.
이 단계에서는 데이터 모델을 가지고 UI를 렌더링하는 앱의 정적 버전을 만듭니다. state를 사용하지 않고 데이터 모델을 통해 UI를 렌더링하며, state를 업데이트하는 기능은 추가하지 않습니다. 이는 단계적인 접근을 통해 UI를 구축하는 데 도움이 됩니다.
3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기
이 단계에서는 UI에 필요한 state를 식별하고, 각 state가 어떤 컴포넌트에서 관리되어야 하는지를 결정합니다.
이 단계에서는 UI에 필요한 최소한의 state를 결정합니다. 각 데이터에 대해 어떤 컴포넌트가 state를 가지고 있는지를 파악하고, 중복을 최소화하여 상호작용이 가능한 UI를 구축합니다.
4단계: State가 어디에 있어야 할 지 찾기
각 state가 어떤 컴포넌트에서 관리되어야 하는지 결정합니다. 이는 React의 단방향 데이터 흐름을 따르며, 컴포넌트 계층 구조를 통해 데이터가 어떻게 흐르는지를 이해하는 데 도움이 됩니다.
이 단계에서는 각각의 state가 어떤 컴포넌트에서 관리되어야 하는지를 결정합니다. React의 단방향 데이터 흐름을 따라 컴포넌트 계층구조를 분석하여 state의 소유자를 결정합니다.
5단계: 역방향 데이터 흐름 추가하기
마지막으로, UI의 상호작용을 통해 state를 업데이트하기 위한 역방향 데이터 흐름을 추가합니다. 이를 통해 사용자 입력에 응답하고 UI를 업데이트할 수 있습니다.
이 단계에서는 UI의 상호작용을 통해 state를 업데이트하기 위한 역방향 데이터 흐름을 추가합니다. 컴포넌트 간의 데이터 흐름을 명시적으로 만들어 UI를 업데이트하고 사용자 입력을 처리합니다.
본문 캡쳐
요약 이미지
해당 문서 자료 주소
https://ko.legacy.reactjs.org/docs/thinking-in-react.html
React.js + Spring Boot
출처
- "React.js + Spring Boot" 허광남, kenu@okky.kr
참고개념 및 자료
용어정리
