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

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

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

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

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

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

function 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라고 부르겠습니다. 다음은 우리의 구성 요소 코드입니다:

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

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

function 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 형태로 받아 우리가 원하는 방식으로 표시하게 됩니다.

구성 요소 Users의 상태에 다음 배열이 주어졌습니다:

const 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},
];

이 배열을 반복문으로 순회하고 모든 사용자를 화면에 표시하세요. 사용자 표시를 위해 별도의 구성 요소 User를 만드세요.