소주제 : 컴포넌트 디자인 패턴 & 리액트의 단방향 흐름
1. 폴더구조 체계화(Container/Presenter 패턴)
폴더: /class_quiz/pages/05/boards/
안의 내용을 /class_quiz/pages/06/boards/
에 복사해서 붙여넣은 뒤 퀴즈를 수행해주세요.
-
05폴더에서 진행했던 퀴즈 파일의 폴더 구조를 container/presenter 패턴을 활용해서 변경해 보세요.
(폴더명, 파일명 등은 임의로 진행해 주세요.)
-
05폴더에서 진행했던 퀴즈 파일의 폴더 구조를 container/presenter 패턴을 활용해서 변경해 보세요.
(폴더명, 파일명 등은 임의로 진행해 주세요.)
소주제 : Emotion active & map
1. Emotion active
폴더: /class_quiz/pages/06/boards/
안의 내용을 /class_quiz/pages/07/boards/
에 복사해서 붙여넣은 뒤 퀴즈를 수행해주세요.
- 어제 과제에서 사용된 태그들을 emotion으로 변경하고, 모든 입력이 완료되면 props를 활용하여 버튼을 활성화 시켜주세요.
2. Map / Filter
폴더: /class_quiz/pages/07/products/
안에서 퀴즈를 수행해주세요.
- fetchProducts를 활용하여 상품 목록을 화면에 출력해 주세요.
- 상품 목록의 각 행 왼쪽에 체크박스를 만들어 주세요.
- 상품 목록의 각 행 오른쪽에 삭제 버튼을 만들어 주세요.
- 체크박스를 체크하고 삭제 버튼을 클릭하면, 해당 줄을 삭제해 주세요.
- refetchQueries를 활용하여 표를 업데이트 해주세요.
- 체크박스에 체크도 사라져있는지 확인하고, 사라지지 않았다면 이유는 무엇인지, 사라지도록 만들려면 어떻게 해야하는지 구현해 보세요.
보너스-1)