231204 TIL

React로 생각하기

React로 생각한다니?

우리는 React를 사용해, 사용자 인터페이스를 구축할 때 가장 먼저 구성 요소라는 조각으로 분리합니다.
그런 다음, 각 구성 요소의 다양한 시각적 상태를 설명합니다.
그리고 마지막으로는 데이터가 구성요소를 통해 흐르도록 구성요소를 함께 연결하죠.

모형으로 알아보기

<script>
[
  { 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" }
]
</script>

먼저 React 공식에서 제공한 JSON API를 한 번 볼까요?
이걸 모형으로 변환시킨다면 아마 아래와 같은 모습이 나올 겁니다.

문자열이 이렇게 깔끔하게 정렬된다니...순서를 통해 한 번 알아봅시다.

1. UI를 구성 요소 계층 구조로 나누기.

먼저 우리는 모형의 모든 구성요소와 하위 구성요소 주위에서 상자를 그리고 그 이름을 지정하는 것부터 시작할 수 있습니다.
예를 든다면 밑의 그림과 같겠네요.

만약 디자이너와 함께 작업하신다면, 디자인 도구(ex:)Figma)에서 이러한 구성 요소의 이름을 이미 지정하셨을 수도 있습니다.
또한, 이러한 상자로 나누는 과정과 상자 이름을 정하는 것은 배경에 따라 다양한 방식으로 구성 요소를 분할 할 수 있습니다.

• 프로그래밍
  새 함수나 개체를 만들어야 하는지 경정하는데 동일한 기술을 사용합니다.
  그러한 기술 중 신경 써야하는 것 하나는 단일 책임 원칙입니다.
  즉, 구성요소는 이상적으로 한 가지 작업만 수행해야 한다는 거죠.
• CSS
  클래스 선택자를 무엇으로 만들 것인지 고려하세요. (단, 구성요소의 세부 수준은 약간 낮습니다.)
• 디자인
  디자인 레이어를 어떻게 구성할지 고려합니다.

그러한 사항들을 고려하여 위의 그림을 살펴보자면, 그림에는 다섯 가지의 구성요소가 있습니다.

1. FilterableProductTable : 회색에는 전체 앱이 포함됩니다.
2. SearchBar : 파란색은 사용자의 입력을 받습니다.
3. ProductTable : 라벤더색은 사용자의 입력에 따라 목록을 표시하고 필터링합니다.
4. ProductCategoryRow : 녹색은 각 카테고리의 제목을 표시합니다.
5. ProduckRow : 노란색은 각 제품에 대한 행을 표시합니다.

이렇듯 모형에서 구성요소를 식별했으므로, 이를 계층 구조로 정렬할 필요가 있습니다.
모형의 다른 구성요소 내에 나타내는 구성요소는 계층구조에서 하위로 표시되어야 합니다.

FilterableProductTable

SearchBar
ProductTable

ProductCategoryRow
ProductRow

이런 식으로 말이죠.

---

2. React에서의 정적 버전 빌드

이제 구성요소 계층구조가 있으므로 앱을 구현할 차례입니다.
가장 간단한 접근 방식은 상호작용을 추가하지 않고, 데이터 모델에서 UI를 렌더링하는 버전을 구축하는 것입니다.

데이터 모델을 렌더링하는 정적 버전의 앱을 빌드하려면 다른 구성 요소를 재사용하고 props를 사용하여 데이터를 전달하는 구성 요소를 빌드해야 합니다 . Prop은 부모에서 자식으로 데이터를 전달하는 방법입니다. ( 상태 개념에 익숙하다면 이 정적 버전을 빌드하는 데 상태를 전혀 사용하지 마세요. 상태는 상호작용, 즉 시간이 지남에 따라 변경되는 데이터용으로만 예약되어 있습니다. 이는 앱의 정적 버전이므로 , 필요하지 않습니다.)

계층 구조에서 더 높은 구성 요소를 구축하는 것부터 시작하여 "하향식"으로 구축 FilterableProductTable하거나(예: ) 더 낮은 구성 요소부터 작업하여 "상향식"으로 구축할 수 있습니다 ProductRow. 간단한 예에서는 일반적으로 하향식으로 진행하는 것이 더 쉽고 대규모 프로젝트에서는 상향식으로 진행하는 것이 더 쉽습니다.

예시 스크립트는 너무 기니까...넘어가겠습니다.

---

3. UI 상태에 대한 최소한이지만 완전한 표현 찾기.

UI를 대화형으로 만들려면 사용자가 기본 데이터 모델을 변경할 수 있도록 해야 합니다.
이를 위해 상태를 사용합니다 .

상태를 구조화하는 작업 중 가장 중요한 원칙은 상태를 DRY로 유지하는 것입니다.

애플리케이션에 필요한 상태의 최소한의 표현을 파악하고 필요에 따라 다른 모든 것을 계산합니다.
예를 들어 쇼핑 목록을 작성하는 경우 항목을 상태 배열로 저장할 수 있습니다.
목록의 항목 수도 표시하려면 항목 수를 다른 상태 값으로 저장하지 말고, 대신 배열의 길이를 읽으십시오.

일단은 예제 어플리케이션의 모든 데이터 조각을 생각해 봅시다.

1. 원래 제품 목록
2. 사용자가 입력한 검색어
3. 체크박스의 값
4. 필터링된 제품 목록

우리는 여기서 상태가 아닌 것을 식별해야 합니다.

• 시간이 지나도 변함없이 유지 되나요 ? 그렇다면 그것은 상태가 아닙니다.
• 소품을 통해 부모로부터 전달 됩니까 ? 그렇다면 그것은 상태가 아닙니다.
• 구성 요소의 기존 상태나 소품을 기반으로 계산할 수 있나요 ? 그렇다면 그것은 확실히 상태가 아닙니다!

다시 하나씩 살펴봐야할 것 같습니다.

1. 원래 제품 목록은 props로 전달되므로 상태는 아닙니다.
2. 검색 텍스트는 시간이 지남에 따라 변하고, 어떤 것에서도 계산할 수 없기 때문에 상태겠네요.
3. 확인란의 값은 시간이 지남에 따라 변경되고, 어떤 것에서도 계산할 수 없기 때문에 상태죠.
4. 필터링된 제품 목록은 원래 제품 목록을 가져와, 검색 텍스트와 확인란 값에 따라 필터링하여 계산할 수 있으므로, 상태가 아닙니다.

Finally! 검색 텍스트와 체크박스의 값만 상태임을 의미합니다.

---

4. State가 어디에 거주해야 하는지 확인하세요.

앱의 최소 상태 데이터를 식별한 후, 이 상태 변경을 담당하거나 상태를 소유하는 구성요소를 식별해야 합니다.

기억하세요! React는 단방향 데이터 흐름을 사용하여, 구성요소 계층구조를 따라 상위 구성요소에서 하위 구성요소로 데이터를 전달합니다.

우리는 어플리케이션의 각 상태에 대해 다음을 수행해야 합니다.

1. 해당 상태를 기반으로 무언가를 렌더링하는 모든 구성요소를 식별합니다.
2. 가장 가까운 공통 상위 구성요소(계층주고에서 모든 구성요소 위에 있는 구성요소)를 찾습니다.
3. State가 거주할 지역을 결정합니다.

• 종종 상태를 공통 상위 항목에 직접 넣을 수 있습니다.
• 또한 공통 상위 요소 위의 일부 구성요소에 상태를 넣을 수도 있습니다.
• 상태를 소유하는 것이 적합한 구성요소를 찾을 수 없는 경우, 상태 유지 전용으로 새 구성요소를 만들고 이를 공통 상위 구성요소 위의 계층구조 어딘가에 추가할 수 있습니다.

결론적으로 우리의 전략은 이렇습니다.

1. 상태를 사용하는 구성요소를 식별합니다.

• ProductTable해당 상태(검색 텍스트 및 확인란 값)를 기준으로 제품 목록을 필터링해야 합니다.
• SearchBar해당 상태(검색 텍스트 및 확인란 값)를 표시해야 합니다.

2. 공통 상위 요소 찾기: 두 구성 요소가 공유하는 첫 번째 상위 구성 요소는 입니다. FilterableProductTable
3. 상태가 어디에 있는지 결정합니다 . 필터 텍스트와 확인된 상태 값을 에 유지합니다. FilterableProductTable

따라서 상태 값은 FilterableProductTable.

결정이 됐다면 Hook을 사용하여 구성요소에 상태를 추가 합니다. useState()죠.
Hook은 React와 연결 할 수 있게 해주는 기능입니다.

<script>
function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);
</script>

이런 식으로 말이죠.

그런 다음, FilterText 와 inStockOnly를 하위 컴포넌트 ProductTable, SearchBar로 전달합니다.

<script>
<div>
  <SearchBar 
    filterText={filterText} 
    inStockOnly={inStockOnly} />
  <ProductTable 
    products={products}
    filterText={filterText}
    inStockOnly={inStockOnly} />
</div>
</script>

이런 식으로 {}를 사용해 전달할 수 있습니다.

---

5. 역방향 데이터 흐름 추가

현재 이 예시 앱은 계층 아래로 흐르는 소품과 상태를 사용해, 올바르게 렌더링 됩니다.
그러나 사용자의 입력에 따라 상태를 변경하려면, 데이터가 다른 방향으로 흐르는 것도 지원해야 하죠.