[Step2] hippo - Props와 State - #2
Conversation
| @@ -0,0 +1,32 @@ | |||
| import styles from "./RestaurantList.module.css"; | |||
| import { CATEGORY_IMAGES } from "../../constants/categoryImages.js"; | |||
There was a problem hiding this comment.
[배움]
이미지를 아예 상수 파일로 분리하셨네요! 보기에도 깔끔하고, 유지 보수에도 더 좋은 구조인 것 같아서 저도 적용해보고 싶습니다.
| return ( | ||
| <section className={styles.restaurantList}> | ||
| <ul> | ||
| {restaurants.map((restaurant) => { | ||
| return ( |
There was a problem hiding this comment.
[제안]
저는 <section>, <ul> 태그의 return는 그대로 두고 <li> 태그만 map() 안쪽으로 옮겨주었는데, 결과는 같겠지만 렌더링 방식이나 효율에서 어떤 차이가 나는지 이야기해보면 좋을 것 같습니다!
| export function filterRestaurants(restaurants, category) { | ||
| if (category === "전체") return restaurants; | ||
| else { | ||
| return restaurants.filter((restaurant) => restaurant.category === category); | ||
| } | ||
| } |
There was a problem hiding this comment.
[질문]
레스토랑 필터 적용 로직을 util 파일로 분리하신 점이 새로운 것 같습니다!
저는 해당 부분이 크게 복잡하거나 활용도가 높지 않다고 생각해서 그냥 App 파일에 넣어주었는데, 혹시 분리하신 이유가 있을까요?
There was a problem hiding this comment.
필터 계산 로직은 UI와 무관한 순수 함수이므로, utils/로 분리해서 이 파일은 UI를 담당하지 않는다는 의도를 명확히 할 수 있다고 생각합니다.
| const filteredRestaurants = filterRestaurants(RESTAURANTS, category); | ||
|
|
||
| function handleChange(e) { | ||
| setCategory(e.target.value); | ||
| } |
There was a problem hiding this comment.
[제안]
핸들러를 먼저 만들어서 카테고리 필터에 넘겨주셨네요.
전 요구사항을 그대로 반영해서 이런 방식을 생각해보지 못했는데, 핸들러가 어떤 파일에 있는 것이 더 자연스러운지 스터디 때 이야기해보면 좋을 것 같아요!
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
2 participants
개인 목표 달성 여부
리뷰어에게