소주제 : 컴포넌트 디자인 패턴 & 리액트의 단방향 흐름

1. 폴더구조 체계화(Container/Presenter 패턴)

폴더: /class_quiz/pages/05/boards/ 안의 내용을 /class_quiz/pages/06/boards/ 에 복사해서 붙여넣은 뒤 퀴즈를 수행해주세요.

  1. 05폴더에서 진행했던 퀴즈 파일의 폴더 구조를 container/presenter 패턴을 활용해서 변경해 보세요.

    (폴더명, 파일명 등은 임의로 진행해 주세요.)

  2. 05폴더에서 진행했던 퀴즈 파일의 폴더 구조를 container/presenter 패턴을 활용해서 변경해 보세요.

    (폴더명, 파일명 등은 임의로 진행해 주세요.)

소주제 : Emotion active & map

1. Emotion active

폴더: /class_quiz/pages/06/boards/ 안의 내용을 /class_quiz/pages/07/boards/ 에 복사해서 붙여넣은 뒤 퀴즈를 수행해주세요.

  1. 어제 과제에서 사용된 태그들을 emotion으로 변경하고, 모든 입력이 완료되면 props를 활용하여 버튼을 활성화 시켜주세요.

2. Map / Filter

폴더: /class_quiz/pages/07/products/ 안에서 퀴즈를 수행해주세요.

  1. fetchProducts를 활용하여 상품 목록을 화면에 출력해 주세요.
  2. 상품 목록의 각 행 왼쪽에 체크박스를 만들어 주세요.
  3. 상품 목록의 각 행 오른쪽에 삭제 버튼을 만들어 주세요.
  4. 체크박스를 체크하고 삭제 버튼을 클릭하면, 해당 줄을 삭제해 주세요.
  5. refetchQueries를 활용하여 표를 업데이트 해주세요.
  6. 체크박스에 체크도 사라져있는지 확인하고, 사라지지 않았다면 이유는 무엇인지, 사라지도록 만들려면 어떻게 해야하는지 구현해 보세요.

보너스-1)