React에서 자식 컴포넌트에서 부모의 상태 변경하기

이전 강의에서 우리는 데이터가 포함된 상태가 부모 컴포넌트에 저장되고, 자식 컴포넌트가 이 데이터를 props로 받았습니다.

이제 우리가 우리의 상품을 변경하고 싶다고 해봅시다. 예를 들어, 우리 상품을 장바구니에 담는 버튼을 만들어 봅시다. 먼저 우리 상품 배열에 상품이 장바구니에 있는지 여부를 나타내는 inCart 필드를 추가해 보겠습니다:

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

Products 컴포넌트에서 상품 태그에 속성 inCart를 추가하겠습니다:

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

이제 자식 컴포넌트 Product에서 장바구니 정보를 표시하고, 장바구니 추가 버튼을 만들어 보겠습니다:

function Product({ id, name, cost, inCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button>to cart</button>
	</div>;
}

추가 기능 구현하기

React 규칙에 따르면 컴포넌트는 자신의 props를 변경해서는 안 됩니다. 이는 자식 컴포넌트가 prop inCart를 변경하여 스스로를 장바구니에 담을 수 없다는 의미입니다. 이는 올바르지 않습니다.

올바른 방법은 부모 컴포넌트에게 특정 상품을 장바구니에 담도록 하여 자신의 상태 prods를 변경하도록 요청하는 것입니다.

어떻게 하는지 살펴봅시다.

부모 컴포넌트에 id를 매개변수로 받아 해당 상품의 inCart 속성을 true로 변경하는 함수 addToCart를 만들겠습니다:

function addToCart(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.inCart = true;
		}
		
		return prod;
	}));
}

상품 태그에 우리가 만든 함수를 전달하는 속성과, 상품의 id를 전달하는 속성을 추가하겠습니다:

const items = prods.map(prod => {
	return <Product
		key      ={prod.id}
		id       ={prod.id}
		name     ={prod.name}
		cost     ={prod.cost}
		inCart   ={prod.inCart}
		addToCart={addToCart}
	/>;
});

보시다시피, 컴포넌트의 props에는 데이터뿐만 아니라 함수도 전달할 수 있습니다.

최종 Products 클래스 코드는 다음과 같습니다:

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

이제 자식 클래스에서 함수 addToCart를 사용할 수 있습니다. 버튼 클릭 시 상품의 id를 매개변수로 전달하여 이 함수를 호출해 보겠습니다:

function Product({ id, name, cost, inCart, addToCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button onClick={() => addToCart(id)}>to cart</button>
	</div>;
}

결과적으로, 자식 컴포넌트의 버튼을 클릭하면 부모의 함수가 호출되어 부모의 상태를 변경합니다. 부모 상태의 변경은 리렌더링을 일으키고, 변경된 props를 전달받은 우리의 상품을 다시 그리게 됩니다.

이전 강의의 User 컴포넌트를 가져오세요. 사용자를 차단하는 버튼을 추가하도록 만드세요.