part2 마지막 강의에서 질문드려요!

[백승전]

안녕하세요, 좋은 강의 잘 보고 배우고 있습니다!

part2 마지막 강의에서 '주문하기'버튼을 눌렀을 때, 재고감소가 렌더링이 잘 되지 않는 문제때문에 질문드려요.

먼저 제 코드는 이렇습니다.

function App() {
const [stocks, setStocks] = useState([10, 11, 12]);  // App.js에서 재고 state를 관리
const orderItem = (id) => {       // props로 Detail에 내려줄 주문하기 함수 선언
    let stocksArray = stocks;
    stocksArray[id]--;
    console.log("order, id: " + id + ", stocksArray: " + stocksArray);
   // 콘솔로그로 함수호출여부 및 변수 확인
    setStocks(stocksArray);
    console.log("stocks: ", stocks);
   // 콘솔로그로 재고 state가 갱신되었는지 확인
  };

// 중략 (이하 중략은 '...' 으로 표기)

return (
...
<Route path="/detail/:id">
    <Detail data={items} stocks={stocks} orderItem={orderItem} />
</Route>
...
)}

 

function Detail(props) {
...
const { id } = useParams();
const [stock, setStock] = useState(props.stocks[id]);
...
console.log("Detail에서의 props 갱신, stock: ", stock);
// 콘솔 로그로 Detail이 렌더링이 되는지, props가 갱신 되는지 확인
return(
...
<p>재고 : {stock}</p>  // 재고 출력부분
...
<Button        // 리액트 부트스트랩의 Button사용
  variant="danger"
  onClick={() => {
    props.orderItem(id);   // onClick의 콜백함수로 props로 내려받은 orderItem 호출
  }}
>
  주문하기
</Button>
...
)}

 

이와 같이 작성하고 '주문하기' 버튼을 여러번 클릭했을 때 콘솔 로그 결과입니다.

Detail 컴포넌트가 최초 렌더링될 때 말고는 다시 렌더링 되지 않는거 같은데요..

제가 제대로 공부한게 맞다면.. App.js에서 state가 변경될때마다 Detail을 호출하고, Detail을 호출할때마다 재고 출력부분도 렌더링이 되어야 할거 같은데... 제가 잘못알고 있는걸까요??

App.js에서 state는 정상적으로 감소하는데, Detail로 전달이 안되는거 같아요..
왜 그런지 알려주실수 있나요?

[codingapple]

props로 전해준 stocks는

state에 담아쓰지말고 직접 html에 꽂아넣도록 합시다 state에 다시 담을 필요가 없어보입니다 

stocks가 변경이 되면 stocks가 html 안에 쓰이고 있는 컴포넌트는 재렌더링됩니다 

[백승전]

답변 감사합니다! ... 만...

사실 원래는 말씀해주신대로 코딩했었는데, 혹시 state에 넣어주면 렌더링이 될까 싶어서 바꿔봤던거를 미처 원상태로 못돌려놨었네요.. ㅎㅎ

말씀하신대로 바로 꽂아 넣어봐도 여전히 Detail 자체가 렌더링이 안돼요 ㅠㅠ

[codingapple]

orderItem 함수에서 state 변경할 때 우선 카피를 안한게 아닐까요 

[백승전]

 let stocksArray = stocks;  <- 이부분에서 한거 같아요..

그리고 state가 잘 갱신되는거까지는 콘솔로그로 확인되는데 Detail을 호출을 안해요..

[codingapple]

 let stocksArray = [...stocks] 이렇게 카피합시다 

[백승전]

우왓!! 돼요!!! 감사합니다!

그런데 혹시 무슨 차이인지 알려주실 수 있으세요?

음.. 일단 [...stocks]는 개별 요소를 가져와서 stocksArray에 넣어주니까 state를 안건드린다는건 알겠는데..

 let stocksArray = stocks; <- 요렇게 넣어줬을때도, 콘솔 로그에는 stocks가 줄어들던데.. 왜 이때는 렌더링이 안됐던 걸까요?

stocks의 주소값이 바뀌어 버린걸까요?

[codingapple]

리액트는 기존 state와 현재 state가 달라진걸 감지해야 재렌더링 해줍니다

그냥 등호로 복사하는건 자료의 별개 사본을 만들어주세요가 아니라 array 자료의 reference 복사라서 그렇습니다

 

[글쓴이]

글