lifting state up

https://velog.io/@devjade/React-State-%EB%81%8C%EC%96%B4%EC%98%AC%EB%A6%AC%EA%B8%B0Lifting-State-Up

https://ko.reactjs.org/docs/lifting-state-up.html

lifting state up : 모달창 컴포넌트를 부모 컴포넌트 (= productMain.js)에 넣으면서 product의 데이터를 어떻게 모달창에 받아서 띄워줄지 하루종일 고민하였다. 우선 product는 부모컴포넌트에서 모든 데이터를 받아 map으로 뿌려지고 있었고 해당 컴포넌트의 값만 가져와서 모달창에 뿌려주는 것은 리액트의 "단방향 데이터 흐름" 을 거스르는 일이었다. 그래서 진짜 거슬러 버렸다. 공식문서와 강의들을 봐도 이해가 가지 않아서 고민을 많이 했는데 동기들과 얘기를 해보고 + console.log를 계속 찍어보면서 점진적 개발을 진행하였다. 시간이 조금 걸렸지만 결국 성공하였다. 제품컴포넌트에서 받은 props를 모두 내려받고, 그 props들을 이벤트(버튼클릭)가 발생할 때 부모에게 해당 데이터를 전달하려면, 이벤트(버튼클릭)에 콜백함수를 실어 인자로 이벤트를 넣어주고, 버튼클릭함수의 인자로는 props를 넣어줘서 부모로 올렸다. 그리고 부모 컴포넌트 (= productMain.js)에서는 (올려받은) 해당데이터를 담을 새로운 객체 state를 만들고 state를 바꿔줄 함수를 선언한다. 그 함수를 이제 모달의 props로 넣어주면서 해결되었다. 힘든 여정이었지만 이 경험을 통해 리액트의 성격을 한번 더 공부할 수 있게 되었다.

 <ModalBuyNow
            setIsPopModal={setIsPopModal}
            infoTag={productsList.description}
            product={selectedProduct}
          />

  {productsList.map(el => (
            <Product
              el={el}
              key={el.id}
              id={el.id}
              btnOnClick={PopUpModalBuyNow}
            />
          ))}

  <Button btnOnClick={event => btnOnClick(el)} point={true}>
            바로구매
          </Button>

const ModalBuyNow = ({ setIsPopModal, infoTag, product }) => {