[React] 리액트에서 classList 수정하기, 조건에따라 className 변경하기

문제

입력에따라 tailwind 스타일을 적용하기위해 요소의 className을 추가하거나 제거해야하는 상황이 있었는데 class를 조작한다고하니 이전에 바닐라JS로 했던 방법이 떠올라 classList.add, classList.remove등을 사용했다. 그러나 계속 add가 존재하지 않는다거나하는 오류발생했다.. 찾아보니 리액트에선 DOM 요소에 직접적으로 접근하는 것을 권장하지 않는다고 한다!!

 

사용자 입력에따라 렌더링할 내용, 조건 등을 state로 관리하듯이 JSX 문법을 활용해 조건에 해당하면 currentStep 클래스를 포함시키고 그렇지 않은 경우 포함시키지 않는 방식으로 변경해야한다!!!

 

 

기존 방법

const handleStepSelection = (e, element) => {
    prevStepRef.current?.classList?.remove('currentStep');
    element.classList.add('currentStep');
    prevStepRef.current = element;
  };

 

 

수정한 방법

<button
  id={REGISTRATION_STEP.COURSE_INFO}
  className={currentStep === REGISTRATION_STEP.COURSE_INFO ? 'currentStep' : null}
  onClick={handleStepSelection}
>
  코스 정보
</button>

const handleStepSelection = (e) => {
  setCurrentStep(e.currentTarget.id);
};