4. React

[B0XERCAT]

React2

지난 주차에는 React로 컴포넌트를 만들어 봤는데

이번 주차에는 본격적으로 상태를 활용해보겠습니다!

---

필수 공부 자료

• React 공식문서 번역본

  • state 관리
  • 탈출구

---

실습 과제

실습하기 전에 반드시

git switch main
git pull
git checkout -b 22-[브랜치 이름]

으로 새로 브랜치를 생성해주세요!

1. 캠퍼스 필터를 만들어 보아요!

campus_filter.mp4

위의 영상과 같이 선택한 캠퍼스에 맞는 스터디만 걸러지도록 필터를 만들어주세요!

Hint!!

studyList에 studyData 상태를 만들고 setStudyData를 prop으로 campusFilter에 전달해주는 방식으로 필터를 컴포넌트화 할 수 있습니다!
컴포넌트화가 어렵다면 studyList에 campusFilter를 만드셔도 됩니다!

---

2. React Icons

텍스트 아이콘들을 React Icons으로 변경해주세요!

React Icons는 하나의 컴포넌트이기 때문에 style 적용이 가능합니다!! Size 조정이나 색상 조정 심지어 hover 등의 CSS까지 적용할 수 있기 때문에 활용도가 높습니다!

• React Icons
• 위의 페이지에서 installation과 usage를 확인하시고
• 원하는 아이콘을 골라서 프로젝트에 적용해주세요!

---