React에서 하위 구성 요소에 상태 전달하기

제품 배열이 주어졌다고 가정해 보겠습니다:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

이 배열이 Products 구성 요소에 있다고 가정합니다. 이 제품들을 구성 요소의 상태에 기록해 보겠습니다:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

이제 제품들을 반복문으로 순회하고 어떤 마크업으로 출력해 보겠습니다:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      name: <span>{prod.name}</span>,
      cost: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

보시다시피, 우리의 map 반복문의 내용은 상당히 복잡합니다. 특히 나중에 제품 마크업이 더 커지게 되면 더욱 그렇습니다. 이러한 복잡성은 코드의 가독성, 이해도 및 유지 관리성을 어렵게 만듭니다.

제품 표시를 담당하는 코드를 별도의 구성 요소로 분리하는 것이 더 좋습니다. 이를 Product라고 부르겠습니다. 다음은 우리의 구성 요소 코드입니다:

jsxfunction Product({ name, cost }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </div>;
}

이제 Products 구성 요소 내부에서 map 반복문 안에 하위 구성 요소 Product를 사용해 보겠습니다:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

보시다시피, 이제 반복문 코드가 단순화되고 이해하기 쉬워졌습니다. 또한 이제 제품 표시는 별도의 구성 요소가 담당하며, 해당 구성 요소에서 제품 마크업을 만들고 나중에 편집할 수 있습니다.

기술적으로 보면, 상위 구성 요소가 데이터 상태를 가지고 있고, 하위 구성 요소들은 이 데이터를 props 형태로 받아 우리가 원하는 방식으로 표시하게 됩니다.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];