React - useState 자식 컴포넌트에서 부모 컴포넌트로 데이터 보내기

• 2023.02.16(목) 1차 프로젝트 진행 중
  참고자료 | [React] 자식 컴포넌트에서 부모로 데이터 보내기

---

🚨 문제상황

장바구니 페이지 기능을 구현하던 중, 자식 컴포넌트인 cartList.js에서 부모 컴포넌트인 Cart.js로 데이터를 전달해야 할 일이 생겼다.
사이즈 및 수량을 변경하면 변경된 사이즈 및 수량 데이터를 부모 컴포넌트로 전달을 해야하는 것.

• 그래서 방법을 찾아보다가 useState를 이용해 setState를 자식 컴포넌트에 props로 넘겨서 데이터를 받을 수 있다고 하는 것을 알게 되었고 성공적으로 적용이 되었다!

---

💡 해결방안

setState를 props로 전달

// Cart.js
const [size, setSize] = useState(''); // 상품 사이즈
const [howMany, setHowMany] = useState(''); // 상품 수량

return (
  <CartList setSize={setSize} setHowMany={setHowMany} />
  )

-> setSize와 setHowMany 함수를 각각 setSize와 setHowMany라는 Props에 담아 CartList.js 로 전달함.

---

// CartList.js
const CartList = ({setSize, setHowMany}) => {
  const onSelectSize = e => {
    setSize(e.target.value); // props로 setSize를 전달 받았기 때문에 사용 가능
  };
  const onSelectMany = e => {
    setHowMany(e.target.value); // props로 setHowMany를 전달 받았기 때문에 사용 가능
  };
  
  return (
    <select onChange={onSelectSize}></select>
    <select onChange={onSelectMany}></select>
    )

-> onChange 시 e.target.value로 담은 데이터를 setState로 관리해서 부모 컴포넌트로 전달하는 형태.