Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2단계] 홍석주 미션 제출합니다 #6

Open
wants to merge 1 commit into
base: somefood
Choose a base branch
from

Conversation

somefood
Copy link

안녕하세요.

2단계 미션 진행해보았습니다. 예제들을 찾아가면서 어렵지 않게 해결은 한 거 같습니다.
아래와 같이 완료해서 PR 드립니다.

  • RestaurantList 가 restaurants 배열을 받아서 그릴 수 있도록 변경해 보세요.
  • restaurants 배열을 RestaurantList 의 props로 내려받도록 변경해 보세요.
  • 카테고리 필터에 따라 필터된 음식점 목록을 보여줄 수 있도록 변경해 보세요.

고민사항

  • 현재 App.jsx에 레스토랑 목록을 필터링하고 있는데, 비슷한 요구조건이 늘어나면 App.jsx가 지저분해질거 같은데, 이럴때는 어떤식으로 분리하는지 궁금합니다!
  • RestaurantList.jsx에서 각 카테고리마다 이미지 경로를 전달해주기 categoryImages 객체를 만들고 함수로 갖고 오게끔 처리했습니다. db.json에 url을 추가할까다가 최대한 건들지 않기 위해 위의 방식을 취했는데, 멘토님이라면 어떤식으로 처리하셨을지 궁금합니다!

Comment on lines +11 to +16
const ALL = '전체';
const [category, setCategory] = useState(ALL);
const filteredRestaurants = category === ALL
? restaurants
: restaurants.filter(restaurant => restaurant.category === category);

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 App.jsx에 레스토랑 목록을 필터링하고 있는데, 비슷한 요구조건이 늘어나면 App.jsx가 지저분해질거 같은데, 이럴때는 어떤식으로 분리하는지 궁금합니다!

Comment on lines +10 to +21
const categoryImages = {
'한식': categoryKorean,
'일식': categoryJapanese,
'중식': categoryChinese,
'양식': categoryWestern,
'아시안': categoryAsian,
'기타': categoryEtc
}

function getImage(category) {
return categoryImages[category];
}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RestaurantList.jsx에서 각 카테고리마다 이미지 경로를 전달해주기 categoryImages 객체를 만들고 함수로 갖고 오게끔 처리했습니다. db.json에 url을 추가할까다가 최대한 건들지 않기 위해 위의 방식을 취했는데, 멘토님이라면 어떤식으로 처리하셨을지 궁금합니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant