React에서 자식 컴포넌트에서 부모 상태 편집하기

이제 입력 필드를 사용하여 우리의 제품들을 편집해 보겠습니다. 이를 위해 자식 컴포넌트에 버튼을 만들겠습니다.

이 버튼을 첫 번째 클릭할 때 해당 제품의 이름과 가격 대신 편집을 위한 입력 필드가 나타나도록 하고, 두 번째 클릭할 때 입력 필드 대신 텍스트가 다시 나타나도록 하겠습니다.

간단하게 하기 위해 장바구니 작업은 제거하고, 제품 배열에 isEdit 속성을 추가하여 변경하겠습니다:

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

Product 컴포넌트

제품에 편집용 버튼을 만들겠습니다:

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

이 버튼을 클릭했을 때 부모 컴포넌트에서 전달된 toggleMode라는 함수가 호출되도록 하겠습니다:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			edit
		</button>
	</div>;
}

아직 toggleMode의 구현은 없지만, 이 함수가 부모 컴포넌트에 위치할 것이며, 제품의 id를 매개변수로 받아 제품의 isEdit 속성을 반전시킬 것이라는 점을 알고 있습니다.

또한 버튼 텍스트가 클릭할 때마다 바뀌도록 하겠습니다:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

이제 편집 모드일 때는 데이터가 있는 입력 필드가, 일반 모드일 때는 span 태그가 나타나도록 하겠습니다:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: {isEdit ? <input value={name} /> : <span>{name}</span>}
		cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

입력 필드에 onChange 이벤트를 연결하여 부모 함수 editProd를 호출하겠습니다:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		name: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		cost: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

Products 컴포넌트

이제 Products 컴포넌트로 넘어가겠습니다. 여기에 toggleMode 함수를 구현하겠습니다:

function toggleMode(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.isEdit = !prod.isEdit;
		}
		
		return prod;
	}));
}

또한 editProd 함수도 구현하겠습니다:

function editProd(id, field, event) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod[field] = event.target.value;
		}
		
		return prod;
	}));
}

제품 태그에 속성으로 우리의 함수 toggleMode와 editProd를 전달하겠습니다:

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

Products 컴포넌트의 최종 코드는 다음과 같습니다:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function toggleMode(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.isEdit = !prod.isEdit;
			}
			
			return prod;
		}));
	}
	
	function editProd(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const result = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			isEdit={prod.isEdit}
			toggleMode={toggleMode}
			editProd={editProd}
		/>;
	});
	
	return <div>
		{result}
	</div>;
}

실습 문제

이전 강의에서 여러분이 만든 Users 및 User 컴포넌트에 대해 유사한 작업을 수행해 보세요.