[React] 조건부 스타일 vs 조건부 클래스

조건부 스타일 vs 조건부 클래스

웹 개발에서 스타일링을 적용하는 방법은 다양한데, 그 중에서도 조건부 스타일과 조건부 클래스는 자주 사용되는 두 가지 접근 방식이다. 이 글에서는 두 방법의 특징과 비교를 해보려 한다.

조건부 스타일

조건부 스타일은 특정 조건에 따라 인라인 스타일을 적용하는 방식으로,
주로 React와 같은 프레임워크에서 사용되며, 동적으로 스타일을 변경할 수 있는 장점이 있다.

예시 코드

const MyComponent = ({ isActive }) => {
  return (
    <div style={{ color: isActive ? 'blue' : 'gray' }}>
      {isActive ? '활성 상태' : '비활성 상태'}
    </div>
  );
};

 

위 코드에서 isActive가 true일 때 텍스트 색상이 파란색으로 변경되며, 인라인 스타일을 사용하여 조건에 따라 동적으로 스타일을 적용하고 있다.

조건부 스타일이 유용한 상황

• 간단한 스타일 변경: 특정 요소의 색상이나 크기 등을 간단하게 변경할 때 유용하다.
• 동적 데이터 기반 스타일: API로부터 받은 데이터에 따라 스타일을 변경해야 할 때, 예를 들어, 실시간으로 변하는 데이터에 따라 색상을 변경하는 경우
• 애니메이션 효과: 특정 상태에 따라 애니메이션을 적용할 때, 인라인 스타일로 쉽게 조정할 수 있다.

조건부 클래스

조건부 클래스는 특정 조건에 따라 CSS 클래스를 추가하거나 제거하는 방식이다. 이 방법은 CSS 파일에서 미리 정의된 스타일을 활용하므로, 코드의 가독성과 유지보수성을 높일 수 있다.

예시 코드

const MyComponent = ({ isActive }) => {
  return (
    <div className={isActive ? 'active' : 'inactive'}>
      {isActive ? '활성 상태' : '비활성 상태'}
    </div>
  );
};

// CSS
.active {
  color: blue;
}

.inactive {
  color: gray;
}

 

위 코드에서는 isActive에 따라 active 또는 inactive 클래스를 적용하여 스타일을 변경한다. CSS 파일에서 스타일을 정의하므로, 코드가 더 깔끔해진다.

비교

항목	조건부 스타일	조건부 클래스
성능	매번 새로운 객체 생성, 리렌더링 유발	CSS 규칙 재사용, 브라우저 최적화 혜택
가독성	인라인 스타일로 복잡해질 수 있음	CSS 파일에서 관리, 가독성 높음
유지보수성	스타일 변경 시 컴포넌트 수정 필요	중앙에서 스타일 관리, 유지보수 용이
유용한 상황	간단한 스타일 변경, 동적 데이터 기반 스타일, 애니메이션 효과	복잡한 스타일, 재사용성이 필요할 때

결론

조건부 스타일과 조건부 클래스는 각각의 장단점이 있다. 성능 면에서는 조건부 클래스가 더 나은 선택이 될 수 있지만, 특정 상황에서는 조건부 스타일이 더 유용할 수 있다. 예를 들어, 간단한 스타일 변경이나 동적으로 변하는 스타일이 필요할 때는 조건부 스타일이 적합하다. 따라서 프로젝트의 요구사항과 상황에 따라 적절한 방법을 선택하는 것이 중요하다.

---

Profiler에서 조건부 스타일을 활용해서 리렌더링이 일어나던 부분을 조건부 클래스로 바꾸면서 GPT를 통해 적은 글인데,

개인적으로는 조건부 스타일은 리렌더링을 유발하기에 가급적이면 조건부 클래스가 좋은 것 같다.

(위는 저렇게 적었지만, 아직 경험이 부족해서 조건부 스타일이 더 좋은 경우라고 생각든 적이 없는데 조금 더 개발하다보면 알게되려나싶다.)