TodoList 컴포넌트 및 장바구니 기능구현

🟥 사용파일

1. index.html
2. main.js
3. ProductPage.js
4. ProductOptions.js
5. Cart.js
6. api.js

index.html - main.js - ProductPage.js - ProductOptions.js / Cart.js / api.js

의존성은 이와같다.

🟧 this.render위치

• 생성자 함수 맨아래 실행부분 한번
• 바로 위에 해당 함수 선언 코드 작성
• this.setState안에 state 변화 후 실행부분 한번

🟨 동작원리

main.js

• main.js에서 new ProductPage로 생성
• this.state로 initialState를 받음

ProductPage.js

• productOptions로 new ProductOptions를 처리
• cart로 new Cart를 처리
• this.render는 해당 부분에 바뀔 핸들러나 태그가 없으므로 비워둔다.
• fetch와 관련한 코드 생성 (fetchOptionsDate)
• fetchOptionsDate 실행
• 첫번째 request 후 this.setState를 통해 this.state 내용 변환 + 영향 받는 productOptions.setState(optionData)와 cart.setState({ ... }) 도 영향 끼치게 실행

ProductOptions.js / Cart.js

• this.state는 해당 state를 바꾸고 그 후 render를 진행하여 해당 부분 코드를 받아 innerHTML하고 event Handler를 건다.
  (ProductOptions는 change 이벤트고 Cart이벤트는 클릭 이벤트)
• 각각의 이벤트핸들러가 발생시 ProductOptions는 onSelect 함수를 Cart는 onRemove 함수를 실행하는데 해당 함수들은 ProductPage에서 각각 생성자 함수에 new 했을때 매개변수로 존재한다.

ProductPage.js

• nextState로 기존 this.state 부분 내용을 가져오고 필요한 부분을 추가 / 삭제 후 다시 적용시키게 this.setState(nextState)를 진행한다.
• this.setState는 또 다시 productOptions와 cart에 setState를 발생시켜 해당 바뀐 부분에 대한 처리를 각각의 render로 진행하며 처리한다.

🟩 ProductPage.js의 this.setState가 실행되는 원인

1. fetchOptionDate에서 request를 통해 받아 올 때 변화처리
2. ProductOptions의 change 핸들러가 onSelect를 실행시켜 발생할때
3. Cart의 click 핸들러가 onRemove를 실행시켜 발생할때

🟦 그림으로 표현

🟪 정리

ProductPages.js의 this.setState에 의해 연관된 ProductOptions의 setState와 Cart의 setState가 처리되고 해당 각각의 이벤트 핸들러가 매개변수로 존재하여 ProductPages.js에서 this.setState로 다시 실행될 수 있게 영향을 끼친다.