[TIL] (22.08.10.) React 버튼 onClick 이벤트 처리

상황

리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다. 

해당 버튼들에 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 분기 처리? 같은 것을 어떻게 해야할지는 더 공부해보아야겠다. 

 

 

 

참고자료

React 이벤트 처리