기능 구현 CSS - styled-components 01 - CSS-in-JS

이유승·2023년 7월 25일

기능 구현

목록 보기

18/21

사실 실무에서는 바닐라 상태에서의 CSS 스타일 적용보다는 Styled-Components와 같은 CSS-in-JS 라이브러리가 많이 사용되고 있다고 한다. 이 것도 여러가지가 있지만 지금은 일단 가장 많이 사용되고 있는 Styled-Components에 대한 내용만을 정리해보려 한다.

1. CSS-in-JS?

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 옛날에는 HTML, CSS, JS가 각각의 파일을 가지고 별도로 존재했으나 시대가 지나고 모던 자바스크립트가 출현하며 여러 라이브러리들이 등장하면서 웹 개발의 방식이 변화하였다.

그 중 하나가 웹 애플리케이션을 재활용이 가능한 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이라고 하는데, 웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아닌, 각각의 컴포넌트들이 HTML, CSS, JS를 모두 보유하고 있는 형태로 개발이 진행되고 있다고 한다.

2. HTML, CSS, JS 결합의 장점은?

HTML과 JS의 결합이 이루어진 React.js를 생각해보자. 하나의 파일 내부에서 HTML와 JS를 동시에 사용할 수 있으니 개발 효율이 높아지고, JS에서 사용되는 변수 등을 바로 HTML에서 사용할 수 있으니 개발의 편리함도 높아진다. (화면에 데이터를 출력한다던지, 플래그 변수를 기반으로 원하는 화면만을 렌더링 한다던지 등등..)

CSS와의 결합도 마찬가지이다. 파일을 전환할 필요도 없고, 컴포넌트 내부에서 JS의 변수 등을 그대로 가져와서 CSS 스타일 설정에도 이용할 수 있으니 이는 더 능동적인 스타일 구현에 큰 도움이 되는 것이다.

3-1. Styled-Components.

React.js의 경우 JSX를 통해 이미 HTML과 JS의 결합이 이루어져 있는데, 여기에 CSS 결합을 가능하게 해주는 것이 바로 Styled-Components이다. Styled-Components는 이렇게 트랜드가 되고 있는 CSS-in-JS 라이브러리 중에서도 단연 가장 널리 사용되고 있는 라이브러리라고 한다.

(React.js와 관련된 자료를 찾아볼 때 정말 많은 경우에 Styled-Components를 사용하고 있는 것으로 보아서는 선택이라기보다는 사실상 필수에 가까운 라이브러리라고 생각된다.)

다만 유행은 언제나 돌고 도는 것이고 프로젝트의 특성 등에 따라서 개발 환경이나 상황이 다양하기 때문에 무조건 Styled-Components같은 라이브러리가 절대적인 정답은 아니라고 한다. 개발자는 언제나 유연한 사고를 가져야 한다!

3-2. Styled-Components의 설치와 기본 사용방법.

Styled-Components는 NPM 패키지에 등록되어 있어 프로젝트에서 설치가 간단하다. npm 명령어로 라이브러리를 설치하고, 스타일 속성을 사용하고 싶은 컴포넌트에서 'styled' 함수를 import 한다.

import styled from "styled-components";



const StyledDiv = styled.div`
  color: red;
`;



const Component = () => {
    return (
        <StyledDiv>

        </StyledDiv>
    );
};

styled-components 사용 시에는 기존 HTML 태그의 명칭을 사용하지 않는다. styled-components 문법으로 생성된 작은 컴포넌트를 사용하게 되는데, 이 때문에 styled 함수 사용시 점 표기법으로 생성하고자 하는 HTML 태그의 이름을 따로 지정해주어야 한다.

3-3. Styled-Components의 가변 스타일링.

styled-components의 사용 의의. 컴포넌트에서 변수 등을 매개변수로 받아와서 능동적인 스타일 적용이 가능하다.

import styled from "styled-components";



const StyledDiv = styled.div`
  color: ${(props) => props.color || 'red'};
`;



const Component = () => {
    return (
        <StyledDiv color={color}>

        </StyledDiv>
    );
};

StyledDiv 컴포넌트에서 인자로 color를 넘겨줄 경우, 그 color를 그대로 적용하고 넘겨진 color가 없거나 할 경우에는 'red' 속성을 적용하게 된다.