생각과 감정
페어분께서 차분하게 설명을 해 주셔서 바로 이해가 되었고, 스프린트도 해결할 수 있었다.
페어분처럼 정제된 언어로 깔끔하게 설명할 수 있도록 더 노력해야겠다고 생각했고,
페어분처럼 논리적으로 설명할 수 있으려면 난 아직 많이 멀었구나 생각이 들었다.
요즘 제자리걸음이라는 생각이 많이 든다.
스프린트: state및 state갱신함수도 props로 하위 컴포넌트에 전달해 줄 수 있다.
초기에 스프린트 파일과 데이터 흐름을 보고 정리하여 그려본 파일 구조
리액트에서는 상태의 개수를 최소화하여 관리하는 것이 좋다.
컴포넌트 내부에 변화하는 부분이 있다고 해서 무조건 state로 관리하기 보다는, 기존의 props나 state를 가지고 계산해서 만들수는 없는지 생각해보는 것이 중요하다.
현재 스프린트에서 관리해야 하는 상태는 단 2가지, 장바구니 내의 아이템 리스트와 판매중인 아이템 리스트 이다.
장바구니에 담긴 아이템의 개수를 나타내는 부분이나, 가격의 총합 부분은 이 두 상태를 가지고 충분히 계산이 가능했기 때문에, 새로운 state를 생성하지는 않았다. (여기까지는 이해를 했었다)
App.js 에 작성된 코드는 하위 페이지(컴포넌트)인 shoppingcart, itemListcontainer에 state변수를 props로 내려주고 있었다. state갱신함수가 이 페이지에 같이 적혀 있어서 여기서 상태갱신함수를 써야 된다고 생각했었는데, shoppingcart 페이지에 이벤트 핸들러 함수가 있었다.
그러면 여기서 상태갱신함수를 사용해줘야겠구나..라는 생각까지는 들었는데, 상태갱신함수를 props로 내릴 수 있나? 에서 확신이 안 섰다.
그래서 props drilling 방법으로 App.js -> shoppingcart.js -> item.js 파일 순서로 props를 내려받을 수 있도록 코드를 수정해서 작성해봤는데 기능 구현에 실패했다.
페어분께서는 App.js파일에서는 컴포넌트의 전체적인 구조만 알 수 있도록 하는 것이 목적이기 때문에, shoppingcart페이지에서 상태갱신함수를 사용하는 것이 맞는 방향이라고 해주셨다.
그래서 상태갱신함수까지도 같이 props로 전달을 해야, 비로소 state를 업데이트할 수 있게 되는 것이다.
다시 정리하면 장바구니에 담긴 아이템과, 판매중인 상품 목록은 모든 컴포넌트에서 접근이 필요함
-그렇기 때문에 이 두 state는 전역(최상위 컴포넌트 App)에 두고 관리해야함.
-리덕스를 사용할 수도 있지만, 순수 리액트만을 사용해서도 구현이 가능하다.
