문제
입력에따라 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);
};
'React' 카테고리의 다른 글
[React] 내 tanstack query는 왜 에러를 내지 않을까?? (0) | 2024.09.26 |
---|---|
[Tanstack-Qeury / json-server] json-server에서 내림차순으로 정렬해 get 응답 받기 (0) | 2024.09.20 |
[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기 (1) | 2024.09.13 |
[React/Vite] 카카오맵 API 사용 설정하기 (0) | 2024.09.13 |
[React/JS] 캐러셀 구현하기 (Tailwind) (0) | 2024.09.12 |