[Step4] cactus - 재사용 가능한 컴포넌트 설계 - #9
Conversation
|
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: Organization UI 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 |
|
|
||
| export default function Modal({ title, onClose, children }) { | ||
| return ( | ||
| <div className={`${modalStyles.modal} ${modalStyles["modal--open"]}`}> |
There was a problem hiding this comment.
[질문]
className={${modalStyles.modal} ${modalStyles["modal--open"]}}
이 코드가 필요한 이유가 무엇인가요?
There was a problem hiding this comment.
유성님 README를 읽고 해당 CSS 패턴이 템플릿에서 그대로 가져온 거라 React 조건부 렌더링({isOpen && <Modal />})으로 전환한 코드에서는 불필요한 패턴인 것을 확인했습니다. 템플릿 구조를 그대로 써서 개선할 생각을 못 했는데 덕분에 수정했습니다! 함께 언급해주신 backdrop과 container도 둘 다 position: fixed라 부모 레이아웃에 영향을 받지 않아서 래퍼 <div>도 함께 제거하고 Fragment로 교체했습니다!
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| onSubmit({ id: crypto.randomUUID(), category, name, description }); |
There was a problem hiding this comment.
[배움]
crypto.randomUUID()를 사용해서 고유 ID를 생성한 점이 인상 깊었습니다!
| setNewRestaurants([...newRestaurants, newRestaurant]); | ||
|
|
||
| // 함수형 업데이트 — React가 최신 state를 prev로 전달 | ||
| setNewRestaurants((prev) => [...prev, newRestaurant]); |
There was a problem hiding this comment.
[논의]
두 방식을 스터디 세션 때 같이 정리하면 좋을 것 같습니다!
| {CATEGORIES.map((category) => ( | ||
| <option key={category} value={category}> | ||
| {category} | ||
| </option> | ||
| ))} |
There was a problem hiding this comment.
[배움]
<option value="">선택해 주세요</option>
<option value="한식">한식</option>
<option value="중식">중식</option>
<option value="일식">일식</option>
<option value="양식">양식</option>
<option value="아시안">아시안</option>
<option value="기타">기타</option>
저는 위와 같은 방식으로 구현했습니다. 이 부분을 배열과 map 메서드를 활용한 점이 인상 깊네요! 유지보수성과 가독성에 더 좋다는 점에서 저도 리팩토링해볼게요 !
ehlung
changed the title
2 participants
개인 목표 달성 여부
리뷰어에게