새로운 스타일링 시대:
2015년, 웹 개발 커뮤니티는 스타일을 정의하기 위해 자바스크립트를 사용하게 해주는 JSS라는 라이브러리에 소개되었습니다. 몇 년이 지난 후, React와 같은 프론트엔드 자바스크립트 라이브러리의 부상은 styled-components와 같은 추가적인 발전을 가져왔고, CSS-in-JS의 중요성을 확립했습니다.
JS 내 스타일 삽입: 어떻게 동작할까:
CSS-in-JS의 핵심 아이디어가 무엇인지 궁금할 수 있습니다. 간단합니다. JavaScript나 TypeScript 내에서 직접 CSS 스타일링을 결합합니다. 이 개념은 JS 객체 내 인라인 스타일 사용처럼 기본적으로 들릴 수 있지만, 전용 라이브러리를 활용하면 진정한 힘이 발휘됩니다. 예를 들면, React 버튼은 JavaScript 계층에서 설정된 속성과 조건에 반응하여 styled-components를 사용하여 동적으로 스타일링 될 수 있습니다.
당신의 CSS-in-JS 라이브러리 선택하기:
이 영역으로 들어갈 때 개발자들은 선택의 기로에 서게 됩니다: 프레임워크별 라이브러리 혹은 프레임워크 중립적 라이브러리.
1. 프레임워크별 라이브러리: 특정 자바스크립트 프레임워크를 위해 맞춤화되었습니다. 주요 예시로는:
＊ 오직 React만을 위해 만들어진 Radium.
＊ 주로 JSX 컴포넌트를 위한 Styled JSX, 그러나 React와도 호환됩니다.
2. 프레임워크 중립적 라이브러리: 이들은 다재다능하며, 다양한 프레임워크 또는 순수한 자바스크립트와 함께 작동할 준비가 되어 있습니다. Emotion, JSS, Styled Components가 이 카테고리에서 주목받으며, Aphrodite와 같은 라이브러리는 웹 컴포넌트까지도 지원합니다.
CSS-in-JS의 장점:
CSS-in-JS가 인기를 얻는 데는 이유가 있습니다:
1. 스코프화된 스타일: CSS 명명 충돌에 작별 인사하세요. 고유한 클래스 이름과 개별 컴포넌트에 제한된 스타일로 유지 관리가 쉬워집니다.
2. 서버 측 렌더링: SEO 중심의 앱에는 복덩이로, 서버 측에서 페이지와 스타일을 생성하는 데 유용합니다.
3. 자동 접두사 추가: 브라우저별 접두사에 대해 걱정할 필요가 없습니다. 이 라이브러리들은 자동으로 처리합니다.
주의사항:
하지만 모든 것이 순조롭지만은 않습니다. 개발자들은 다음을 고려해야 합니다:
1. 런타임 비용: 렌더링 중 스타일을 일반 CSS로 변환해야 하는 비용이 발생할 수 있으며, 이로 인해 성능에 영향을 미칠 수 있습니다.
2. 증가된 로드: 새로운 라이브러리는 다운로드 크기에 추가됩니다. Emotion이나 styled-components와 같은 라이브러리가 그렇게 크게 보이지 않을 수 있지만, 성능 중심의 앱에서는 모든 킬로바이트가 중요합니다.
결론:
CSS-in-JS는 현대적인 스타일링 방식으로 웹 개발의 풍경을 재구성하였습니다. 하지만 모든 도구와 마찬가지로 특정 프로젝트의 필요에 따라 그 장단점을 판단하는 것이 중요합니다. CSS-in-JS 열풍에 빠르게 합류하고 싶을 수 있지만, 잴 때 신중하게 접근하면 프로젝트에 올바른 선택을 할 수 있습니다.
