먼저 재고 데이터를 만들어주자, 이걸 이제 Detail.js 까지 끌어와서 데이터 바인딩을 할거다.
가격 아래에 재고를 보여줄건데, 쭉쭉 적으면 너무 길어지니 이것도 컴포넌트로 만들어서 넣자
요렇게 컴포넌트를 만들고
이렇게 끼워넣어주자 !
이제 할거는 우리가 app.js에서 만들어놨던 재고데이터(product)state를
여기에 데이터 바인딩 해주면 된다 !
근데 우리는 바로 상위 컴포넌트에서 props로 가져오는건 알지만, 내 부모가 아닌 내 조상격의 컴포넌트에서 가져오는법은 모르는데? 하지만
너무 쉬워버린거임 props를 쓰고 또 ! props를 쓰면된다
일단 app.js에서 Detail 컴포넌트 부분으로 내려가서
작명을해주고 데이터를 입력해준다 그러면 props를 쓰기위한 준비는 끝 !
이제 다시 Detail.js로 넘어가서
props라고 적어주자, 그러고 이거를 다시
여기에 또 props를 해주어야 한다
여기에서도 다시 만들어놓은 컴포넌트에 작명을하고!
받아올 데이터를 적어놓는다
app.js에서 컴포넌트에 작명했던것 처럼
그러면 옆에 이미지처럼, 우리가 만들어놓은product(state)있는 정보(10,11,12)가 받아져와서 고대로 박히게 된다
대대손손 물려줄수 있다.
근데 저~~~기 주문하기 버튼을 누르면 재고에서 -1 시키고 싶어!
중요한 데이터를 다룰때는 사본을 꼭 ! 만들어서 사용하라고 했던것을 기억하나? 그리고 저렇게 직접빼는게 아닌
'재고변경'함수를 이용해서 빼자, 근데 저 '재고변경'함수도 부모가 갖고있으니 props로 받아오도록 하자
app.js로 와서 다시 Detail 컴포넌트 부분에 '재고변경'함수를 넣자..
저 함수를 Detail.js에서도 쓰기위해서다
다시 돌아오면 props.재고변경을 사용할수있다, 근데 !! 이렇게 직접적으로 변경하면 안되고
사본을 만들어서 사용하자 !!!
먼저 복사본을 하나 만들자
해당 디테일 페이지 id번호에 맞게 재고량을 보여주고 주문하기 버튼을 누르면 해당 재고량에서 1개씩 차감 적용을 했습니다
(다른 수강생님의 해설)
이건 다시 더 파헤쳐보자..
