[REACT] a componenet를 나누는 방법

이 자료는 React 공식문서를 바탕으로 작성해 봤습니다.

react

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

 

 

제품 테이블(라벤더색)을 보면 테이블 헤더('이름' 및 '가격' 레이블이 포함된)가 자체 구성 요소가 아닌 것을 알 수 있습니다. 이것은 선호도의 문제이며 어느 쪽이든 사용할 수 있습니다. 이 예제에서는 ProductTable의 목록 안에 표시되므로 ProductTable의 일부입니다. 그러나 이 헤더가 복잡해지면(예: 정렬을 추가하는 경우) 자체 ProductTableHeader 구성 요소로 이동할 수 있습니다.

If you look at ProductTable (lavender), you’ll see that the table header (containing the “Name” and “Price” labels) isn’t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable’s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.

 

 

Plus+

state는 어디에 둬야 할까?

Searbar에서 검색을 하면 검색된 결과 값이 => Product Table에 반영. 따라서
Searchbar와 Product Table은 형제 Lv때문에 공유가 안됨으로 그 둘의 부모님 FilterableProductTable에 state 위치

 

 

출처

https://react.dev/learn/thinking-in-react