개발일지 Dev Diaries/회고 Retrospective
[TIL] (22.08.10.) React 버튼 onClick 이벤트 처리
이땡칠
2022. 8. 10. 21:27
상황
리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다.
해당 버튼들에 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 분기 처리? 같은 것을 어떻게 해야할지는 더 공부해보아야겠다.
참고자료