[ReactJS] React로 요소에 클래스 추가 및 제거하기 (부제 : React에서 직접 DOM을 조작하지 않도록 하자)

🚨 문제 상황

인스타그램을 클론 코딩하는 과정에서 바닐라 JS로 DOM 요소에 접근한 후 클래스를 추가하고 제거하는 데 classList의 add, remove 메소드를 활용하였다. 그러나 이 코드를 React로 변환하는 과정에서도 classList를 그대로 사용하였더니 정상적으로 동작하지 않는 문제가 발생했다.

 

그래서 console.log()를 통해 React에서도 classList 함수가 제대로 동작하는 지 한 번 실험해보았는데, 클래스가 제대로 제거되고 추가됨을 확인할 수 있었다. 하지만 제대로 동작하는 코드와 달리 화면에 보이는 결과는 그렇지 않았다.

(대상이 되는 클래스가 opacity: 0.6 스타일 속성이 부여된 클래스라, 결과를 화면에서 바로 확인할 수 있는 상황이었다.)

 

// SyLogin.js
const loginBtn = document.querySelector(".first-box__login-form__btn");

const opacityClass = "opacity";

function btnActivate() {
  if (isIdVaild && isPwVaild) {
    loginBtn.classList.remove(opacityClass);
    allVaild = true;
  } else {
    loginBtn.classList.add(opacityClass);
    allVaild = false;
  }
}

/* Login.scss */
.opacity {
  opacity: 0.6;
}

 

---

💡 문제 해결 및 과정

React에서는 classList를 사용하면 안 되는지 구글에 검색을 해보았다. (검색 키워드 : 'react classlist')

그리고 다음 두 자료를 통해 해당 문제의 원인을 파악하고 해결할 수 있었다.

[Stack Overflow] adding and removing a classList in react js
[블로그 포스트] [번역] 주니어 React 개발자들의 실수들 (그리고 그들을 피하는 방법)

React는 가상 DOM을 생성한 후 이를 실제 DOM과 비교하고 달라진 부분만을 실제 DOM에 반영하는 방식으로 렌더링이 이루어진다. 이런 방식을 통해 렌더링 과정을 최소화한다. 그런데 만약 스크립트 코드를 통해 직접 DOM에 접근해버린다면 불필요한 렌더링이 발생할 뿐만 아니라, 웹 애플리케이션의 DOM 내부와 React 내부의 상태가 혼합되어 버리기 때문에 유지보수가 까다로워지는 문제점이 발생한다. 따라서 React에서 직접적인 DOM을 조작은 최대한 안하는 것이 좋다.

 

대신, 아래처럼 JSX 태그의 className의 속성값에 삼항 연산자를 활용한 자바스크립트 코드를 작성해주는 방식으로 직접적인 DOM 조작 없이 원하는 요소에 특정 클래스의 이름을 추가하고 제거할 수 있다.

 

export default function Login() {
    const [isAllVaild, setIsAllVaild] = useState(false);
    ...
    return (
        ...

        <button
          className={`first-box__login-form__btn ${isAllVaild ? '' : 'opacity'}`}
          onClick={() => handleBtnClick()}
        >
          로그인
        </button>

        ...
    );
}

 

---

💬 느낀 점

처음으로 바닐라 JS를 React로 변환하는 작업을 진행하며 여러 크고 작은 어려움들을 만났고, 이런 어려움들을 해결해가며 내가 조금씩 성장해나가고 있다는 느낌을 받았다. 이번에 마주했던 문제는 그 전까진 알지 못했던 내용이었는데, 이번 기회를 통해 React에서 클래스를 동적으로 추가하고 제거하는 방법을 확실히 익힐 수 있어 좋았다. 이제 이 내용을 확실히 내 것으로 만들 수 있도록 기회가 될 때마다 자주 복습해주어야겠다.