상황
리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다.
해당 버튼들에 onClick 이벤트로 모달창을 띄우도록 isModalOpen 값을 변경해주는 함수를 적용하고자 한다.
그리고 클릭한 버튼이 무엇인지에 따라 Modal 컴포넌트에 다른 children 을 주어 Modal 내에 다른 내용이 띄워지도록 처리하고 싶었다.
기존 코드는 이런 식이었다.
고민지점
문제는 특정한 버튼을 클릭할 때, 이 버튼이 어떤 버튼인지에 따라 Modal 의 children 에 들어가야 하는 값이 달라져야 하는데, 그걸 어떻게 해야할지 모르겠다는 점이다.
적용
일단은 하드코딩 느낌이 있지만, 버튼 별로 띄워주고자 하는 Modal 이 다른 거라고 생각했고,
각 버튼에 변경해줘야 하는 모달 상태를 따로 설정하고, 그 상태값에 따라 분기처리하듯이 고쳐보았다.
<>
<ButtonWrapper>
<AddProcedureButton
className="procedure"
onClick={handleProcedureModalOpen}
>
시술 추가하기
</AddProcedureButton>
<AddDiscountButton
className="discount"
onClick={handleDiscountModalOpen}
>
할인 추가하기
</AddDiscountButton>
</ButtonWrapper>
{/* 시술 추가 모달 */}
{isProcedureModalOpened && (
<SelectModal title="시술 선택" close={handleProcedureModalOpen}>
{procedureItems.length > 0 &&
procedureItems.map((item, index) => (
<div key={index}>
{item["count"]} & {item["name"]} {item["price"]}
</div>
))}
</SelectModal>
)}
{/* 할인 추가 모달 */}
{isDiscountModalOpened && (
<SelectModal title="할인 선택" close={handleDiscountModalOpen}>
{discountItems.length > 0 &&
discountItems.map((option, index) => {
return (
<div key={index}>
{option["name"]} {option["rate"]}
</div>
);
})}
</SelectModal>
)}
</>
확실히 하드코딩 모양세이긴 하지만, 일단 기능 구현에는 문제는 없다.
이벤트 함수의 재사용성, 클릭된 버튼에 따른 children 분기 처리? 같은 것을 어떻게 해야할지는 더 공부해보아야겠다.
참고자료
'개발일지 Dev Diaries > 회고 Retrospective' 카테고리의 다른 글
[회고] (22.08.20) JS 변수, 호이스팅, 객체 (0) | 2022.08.20 |
---|---|
[TIL] (22.07.22) 타입스크립트를 쓰는 이유, 모듈, Node.js, npm,자바스크립트 데이터 타입, 배열과 연결리스트 (0) | 2022.07.22 |
[WIL] (22.07.04~10) 세 번의 면접 (0) | 2022.07.10 |
[TIL] (22.07.05) 객체 지향 프로그래밍, React 렌더링 과정, TDD (0) | 2022.07.05 |
[TIL] (22.07.02) 자료구조&알고리즘, OS, 네트워크, 자바스크립트, 리액트 (0) | 2022.07.02 |
댓글