내가 좋아하는 동물

비동기 통신을 연습한 React 과제다. API 로 동물 목록을 받아 사진마다 좋아요·싫어요를 고르고, 오른쪽 목록 색이 그에 따라 바뀐다. 좋아하는 동물들 나누기 를 누르면 /classification 으로 이동해 좋아요와 싫어요로 나눠 보여 준다.

• Main.js 가 데이터를 받아 상태를 들고, 선택 결과는 App.js 로 올려 Classification.js 와 공유한다.
• 쓴 것: react-router, hooks, styled-components, axios.

플레이그라운드에서 바뀐 것

• /classification 을 주소로 직접 열면 선택 결과가 빈 문자열이라 filter 에서 죽었다. 초기값을 빈 배열로 바꿨다. 선택 없이 열면 양쪽 상자가 비어 있는 것은 원래 동작이다.
• 원래는 Google Apps Script 로 만든 과제용 API 에서 동물 사진 목록을 받았다. 응답이 끊겨서 같은 모양의 목록을 public/data/animals.json 에 두고, 사진 자리는 이모지 그림으로 채웠다. 원본은 아래 화면처럼 실제 사진이 나왔다.