• 주제 : map 메서드와 filter 메서드를 이용해 props를 넘겨 화면 렌더링하기

• 학습 목표

  1. 2일차에서 배운 map, filter를 이용한 데이터 가공을 컴포넌트 단위로 이해한다.
  2. Props의 사용법에 대해 이해한다.

• 복습할 개념 체크 리스트

  • React가 데이터를 관리하는 방식 설명: React가 데이터를 관리하는 방식에 대해 복습하세요.
  • Props의 개념과 사용하는 방법 설명: Props의 개념과 사용하는 방법에 대해 복습하세요.
  • React에서 map으로 컴포넌트를 렌더링 하는 방법 설명: map() 메서드를 사용해 데이터를 순회하는 방법에 대해 복습하세요.
  • React에서 filter로 컴포넌트를 필터링 하는 방법 설명: filter() 메서드를 사용해 데이터 필터링에 대해 복습하세요.

---

• 문제 요구 사항

• CardList.jsx 컴포넌트 내 요구 사항

  • 카드의 리스트 UI를 담당하는 컴포넌트 입니다.
  • listData를 받아와서 카드 리스트를 렌더링 해야 합니다.
  • listData의 각 요소를 Card.jsx 컴포넌트에 props로 넘겨주어야 합니다.
  • Card.jsx 컴포넌트에는 item을 넘겨주어야 합니다.

• Card.jsx 컴포넌트 내 요구사항

  • 카드의 1개의 UI를 담당하는 컴포넌트 입니다.
  • item을 받아와서 카드를 렌더링 해야 합니다.
  • item의 title, description, category를 알맞는 html 태그에 넣으세요.
  • item은 CardList.jsx에서 전달됩니다.

• 기본 요구 사항

  1. npm install & npm run dev 를 터미널에 입력하여 서버를 실행합니다.
  2. components/CardList.jsx 를 수정한 뒤 components/Card.jsx 를 수정합니다.
  3. 문제의 요구 사항에 대해 구현합니다.
  4. css는 자유롭게 수정해도 좋습니다.