Thinking in React

학습 내용

리액트 공식 문서에 소개된 🔗 Thinking in React 예제를 통한 코드 실습

Thinking in React

1. step 0 Start with the mockup

• 개발 환경 세팅 (vite)

   npm create vite@latest 

• Thinking in React 예제의 전제 조건 및 Mockup 파악

  • Mockup 과 JSON 형식의 API 확인 후 ⇒ 사용자가 볼 수 있도록 UI 설계

UI

2. step 1 Build a static version in React

1. Static Version UI 구현 (퍼블리싱 작업)

2. JSON 에서 카테고리의 value 값을 추출 ⇒ reduce 메서드를 통해

  [
    { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
    { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
    { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
    { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
    { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
    { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
  ]

  const categories = products.reduce(
    (acc: string[], product: Product) =>
      acc.includes(product.category) ? acc : [...acc, product.category],
    []
  );

3. step 1 Break the UI into a component hierarchy

• UI를 구성 요소 계층 구조로 나누기 (컴포넌트 구성)

1. JSON API 기반으로 UI 구현하니, 반복적인 요소가 보여지고 코드가 길어짐 ⇒ table tbody 영역 컴포넌트로 분리 ProductsInCategory

2. ProductInCategory컴포넌트를 분리하고 보니, 반복적인 요소 발견 ⇒ ProductRow ProductCategoryRow 컴포넌트 분리

3. ProductTable 컴포넌트를 생성해서 table 영역 전체 맵핑

4. 검색 영역 SearchBar 컴포넌트로 분리

5. FilterableProductTable table 과 검색 영역 전체 맵핑

6. SearchBar 분리하고 체크박스 field CheckBoxField 컴포넌트 분리

7. SearchBar 컴포넌트에서 추가로 input field TextField 컴포넌트 분리

• 5.FilterableProductTable

  • 4.SearchBar

    • 7.TextField

    • 6.CheckBoxField

  • 3.ProductTable

    • 1.ProductsInCategory

      • 2.ProductCategoryRow

      • 2.ProductRow

Component

4. step 3 Find the minimal but complete representation of UI state

• state(상태)가 필요한 부분을 식별

  • 원래 제품 목록 (props)

  • 사용자가 입력한 검색어 (state) TextField

  • 체크박스의 값 (state) CheckBoxField

  • 필터링된 제품 목록 (props)

5. step 4 Identify where your state should live

• state(상태)를 식별 한 후 state(상태)의 공통 상위 요소를 찾아 state(상태)의 위치 결정

  • state(상태)가 공유 되어야 하는 공통 상위 컴포넌트 FilterableProductTable

6. step 5 Add inverse data flow

• state(상태)를 업데이트 하기 위한 콜백함수를 역방향으로 끌어올리기

  • 사용자가 입력한 검색어 (state) TextField

  • 체크박스의 값 (state) CheckBoxField

  컴포넌트에서 useState로 생성한 state 끌어올려 공유 컴포넌트에 위치 시키고, props를 통해 하위 컴포넌트에게 state와 state 변경하기 위함 함수를 전달