[React] - React에서 스타일링을 관리하는 방법

1. Styled Components

Styled Components는 CSS-in-JS 라이브러리 중 하나로, 스타일을 자바스크립트 파일 안에 작성하고, 컴포넌트 단위로 캡슐화할 수 있다.

• 장점 😄
  • 자동 최적화: 불필요한 클래스 생성이나 중복된 스타일 제거 등 최적화가 자동으로 이루어진다.
  • 동적 스타일링: Prop에 따라 동적으로 스타일을 변경할 수 있다.
  • CSS의 범위: CSS가 컴포넌트 단위로 캡슐화되어 전역 네임스페이스 충돌 문제가 없다.
• 단점 😞
  • 런타임 성능 저하: Styled Components는 스타일을 자바스크립트로 처리하기 때문에 런타임 성능에 영향을 미칠 수 있다. 특히 많은 컴포넌트가 있을 경우 스타일을 계산하고 적용하는 시간이 증가할 수 있다.
  • 패키지 크기 증가: 추가적인 라이브러리를 포함해야 하므로 번들 크기가 커질 수 있다.
  • SSR(서버 사이드 렌더링): SSR을 사용하는 경우, 스타일을 렌더링하기 위해 추가적인 설정이 필요하며 이로 인해 성능에 영향을 미칠 수 있다.

---

2. CSS Modules

CSS Modules는 일반적인 CSS 파일을 모듈화하여 사용하며, 각 클래스와 스타일이 고유한 범위를 가지도록 만들어 전역 네임스페이스 문제를 해결합니다.

• 장점 😄
  • 성능: CSS가 자바스크립트가 아닌 정적인 스타일시트로 처리되기 때문에 런타임 성능에 영향을 주지 않습니다. CSS 자체는 브라우저에서 효율적으로 캐싱할 수 있다.
  • 전역 스타일 충돌 없음: 클래스 이름이 로컬로 스코프되기 때문에 다른 CSS 파일과의 충돌 위험이 없다.
  • SSG/SSR: 정적인 CSS 파일을 활용하기 때문에 서버 사이드 렌더링이나 정적 사이트 생성 시 성능 이점이 있다.
• 단점 😞
  • 동적 스타일링이 어려움: Styled Components와 달리, Prop에 따른 동적 스타일링이 어렵습니다. 동적 스타일링이 필요할 경우, 추가적인 자바스크립트 코드가 필요하다.
  • 코드 분할 복잡성: CSS 파일이 자바스크립트 코드와 분리되어 있기 때문에, 로딩 순서나 코드 스플리팅 등에서 복잡성이 증가할 수 있다.

---

3. Inline CSS

Inline CSS는 스타일을 HTML 요소에 직접 지정하는 방식으로, React에서는 style prop을 통해 인라인 스타일을 적용할 수 있다.

• 장점 😄 
  • 간단함: 특정 요소에 스타일을 직접 적용하기 때문에 빠르게 스타일을 추가할 수 있습니다.
  • 동적 스타일링: 자바스크립트 객체를 사용하기 때문에 매우 유연하게 동적 스타일링이 가능합니다.
  • CSS 우선순위 문제 없음: 다른 스타일 시트와의 충돌 문제를 신경 쓰지 않아도 됩니다.
• 단점 😞
  • 성능 문제: 인라인 스타일은 브라우저에서 매번 재계산되기 때문에, 특히 많은 요소에 적용된 경우 렌더링 성능에 부정적인 영향을 미칠 수 있습니다.
  • 재사용성 부족: 동일한 스타일을 여러 곳에서 사용할 경우 재사용이 어렵고, 코드 중복이 발생할 수 있습니다.
  • 미디어 쿼리, CSS 의사 클래스 지원 부족: 인라인 스타일은 미디어 쿼리와 같은 CSS의 강력한 기능을 지원하지 않으며, 복잡한 스타일링에 부적합합니다.

 

---

 

성능 비교 요약

	Styled Components	CSS Modules	Inline CSS
장점	- Prop에 따른 동적 스타일링이 가능 - 작은 프로젝트에 적합	- 정적 CSS 파일 사용으로 성능 효율적 - 브라우저에서 스타일 캐싱 - 전역 네임스페이스 문제 해결	- 간단한 스타일을 빠르게 적용 - 동적 스타일링에 유연
단점	- 런타임에 자바스크립트로 스타일 계산 - 런타임 성능에 영향 가능 - 번들 크기 증가 우려	- 동적 스타일링이 어려움 - CSS와 자바스크립트 코드가 분리됨에 따른 복잡성 증가	- 성능 비효율적(특히 많은 DOM 요소에서) - 스타일 재사용성 부족 - 미디어 쿼리 등 지원 부족

 

👨🏻‍⚖️ 결론

• 작은 프로젝트나 컴포넌트의 동적 스타일링이 중요할 경우, Styled Components가 유용할 수 있지만, 런타임 성능에 주의해야 합니다.
• CSS Modules는 정적 스타일링이 많고 성능 최적화가 중요한 경우 적합하며, CSS와 자바스크립트가 분리된 구조를 선호하는 경우 유리합니다.
• Inline CSS는 간단한 스타일 적용에는 적합하지만, 성능에 민감한 애플리케이션에서는 피하는 것이 좋습니다.