[React] CSS-in-JS

CSS-is-JS?

CSS-in-JS는 JavaScript 코드 내에서 CSS 스타일을 작성하고 관리하는 접근 방식을 나타냅니다.
이 방법은 CSS 스타일을 일반적인 CSS 파일로 작성하는 대신 JavaScript 객체나 함수를 사용하여 스타일을 정의하고 렌더링할 때 동적으로 주입하는 방식으로 동작합니다. 이에 대한 장점과 단점은 다음과 같습니다.

장점

1. 컴포넌트 스코프 (Component Scoping): CSS-in-JS는 각각의 컴포넌트 내에서 스타일을 캡슐화하므로 다른 컴포넌트에 영향을 주지 않으며 스타일 충돌을 방지합니다.

2. 동적 스타일링 (Dynamic Styling): JavaScript를 사용하므로 조건에 따라 스타일을 동적으로 생성하고 변경할 수 있습니다. 이로써 상태나 프로퍼티에 따라 스타일을 동적으로 조절할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  border: none;
`;

3. 컴포넌트 지향 스타일링: 컴포넌트 기반 아키텍처와 잘 통합되어, 컴포넌트의 스타일과 동작을 함께 관리할 수 있습니다.

4. 미리 컴파일 가능: 일부 CSS-in-JS 라이브러리는 빌드 시 스타일을 최적화하고 컴파일하여 성능 향상을 제공합니다. -> 추가 학습 필요..

5. 다양한 기능: CSS-in-JS 라이브러리들은 다양한 기능을 제공하며, 예를 들어 테마 지원, 자동 접두어 처리, 서버 사이드 렌더링 등을 통해 개발자 경험을 향상시킬 수 있습니다.

단점

1. 런타임 오버헤드: CSS-in-JS 스타일은 런타임에 동적으로 생성되므로 일부 렌더링 성능 손실이 발생할 수 있습니다. 그러나 최적화된 라이브러리를 사용하면 이 문제를 완화할 수 있습니다.

2. SEO 문제: 일부 검색 엔진은 동적으로 생성된 스타일을 인식하기 어렵게 처리할 수 있으며, 이로 인해 SEO에 영향을 미칠 수 있습니다. 서버 사이드 렌더링을 사용하여 이 문제를 해결할 수 있습니다.

3. 생태계 분산: CSS-in-JS에는 다양한 라이브러리와 접근 방식이 존재하며, 이로 인해 개발자들 사이에 스타일 관리의 일관성이 떨어질 수 있습니다.