리액트 css-in-javascript (Style-Components)

이번에 알아볼 내용은 리액트에서 css-in-javscript 즉, 자바스크립트 안에서 css 스타일을 작성하여 적용하는 방식에 대해 알아보도록 하겠습니다.

📑목차
1. css-in-javascript 
1-1. css-in-javascript 란?
1-2. css-in-javascript 특징
1-3. css-in-javascript 라이브러리 종류
2. styled-componenets
2-1. styled-components 란?
2-2. styled-components 설치
2-3. styled-components 문법
2-4. styled-components 적용 코드

서론

리액트로 프로젝트를 하다 보면, 컴포넌트마다 스타일을 어떻게 관리할지 고민하게 됩니다. 전통적인 CSS 방식은 점점 복잡해지고, 클래스명이 겹치는 문제도 자주 발생하죠. 이런 문제를 해결하기 위해 최근 많이 사용되는 방법이 CSS-in-JS입니다. 이 글에서는 CSS-in-JS가 무엇인지, 왜 사용하는지, 그리고 대표적인 라이브러리인 styled-components를 중심으로 실전 예제까지 함께 알아보도록하겠습니다.

본론

1. css-in-javascript 

 

1-1. css-in-javascript 란?

javascript 코드 내부에서 css 코드를 작성하여 스타일을 적용하는 방식을 말합니다.

 

1-2. css-in-javascript 특징

 

• css 파일을 따로 분리하지 않고 javscript 코드 내부에서 작성
• 컴포넌트 단위의 스타일 관리에 최적화
• 동적 스타일링 가능
• 클래스명 충돌을 방지

 

1-3. css-in-javascript 라이브러리 종류

 

1. styled-components - 가장 많이 쓰이는 라이브러리로, 코드의 가독성을 높여준다.
2. Emotion - styled-components 처럼 사용할 수 있으며, css props도 지원해준다
3. JSS - 함수형 스타일링, 리액트뿐만 아니라 다양한 프레임워크에서도 사용 할 수 있다.

이밖에도 다양한 css-in-javascript 라이브러리가 있습니다. 이중에서 많이 사용하는 styled-components에 대해 학습하겠습니다.

 

2. styled-components

 

2-1. styled-components란?

리액트에서 가장 많이 사용하는 CSS-in-javascript  라이브러리중 하나로 자바스크립트 코드 내부에서 CSS 코드를 작성하여 스타일을 적용할 수 있는 라이브러리

 

2-2. styled-components 설치
https://www.npmjs.com/package/styled-components

styled-components

$ npm i styled-components

 

2-3. styled-components 문법

보통은 css 파일을 따로 분리해서 스타일을 적용했지만 styled-components 라이브러리를 사용하면 css 파일을 따로 분리하지 않고 javscript 코드 내부에서 스타일을 적용하여 컴포넌트를 완성하는 형식으로 작성할 수 있습니다.

import styled from 'styled-components'

// 컴포넌트 div 요소를 반환하는데
// font-size  : 14px;의 스타일이 적용된 요소를 반환하는 컴포넌트
// 클래스의 이름을 해시 문자열로 만들어서 요소에 스타일을 적용
// 전달한 내용은 요소의 내용으로 전달해준다. childern
// 자바스크립트의 변수등 자바스크립트 내용을 사용해야하는데, 문자열로 만들어서 스타일 적용을 해야하기 때문에
// 트리거 템플릿 리터럴
// 함수에 백팅 문자열을 붙이면 함수가 백틱을 태깅한다.
// 문자열로 변환하는 것으로 끝나는게 아니고, 백틱의 내용을 문자열로 만든 뒤에 함수의 매개변수로 전달
const Popup = styled.div`  
    font-size : 14px;
    color : ${props.color}
`

// styled.div 메서드가 호출되고
// 백틱의 문자열이 전달되고
// 문자열을 받아서 고유한 클래스 이름, 해시 문자열로 스타일을 적용
const App = () => {
    return (
        <Popup color={"red"}>안녕</Popup>
    )
}

 

2-4. styled-components 적용 코드

import React from 'react'
import styled from 'styled-components'

const Wrap = styled.div`
    /* 자바스크립트 영역이기 때문에 함수 물론 사용 가능 */
    width: ${({width}) => width ? width : "20px"};
    height: ${({height}) => height ? height : "60px"};
    background-color: #fff;
    border: 1px solid #CBD0D7;
    border-radius: 8px;
    padding : 10px 25px;
    box-sizing: border-box;
    position: relative;

    &::before {
        content: '${(props) => props.label || ""}';
        height: 30px;
        background-color: #fff;
        display: block;
        position: absolute;
        padding: 0 5px;
        left : 25px;
        line-height: 30px;
        top : 0;
        transform: translateY(-50%);
        color: #777;
        font-size: 16px;
        font-weight: 400;
    }

    input {
        width: 100%;
        height : 100%;
        outline: none;
        border: 0;
        background-color: transparent;
        font-weight: 400;
        font-size: 16px;
        color: #333;
    }
`


const Input = ({width, height, label, placeholder}) => {
  return (
    <Wrap width={width} height={height} label={label}>
        <input type="text"  placeholder={placeholder}/>
    </Wrap>
  )
}

export default Input

 

결론

CSS-in-JS는 컴포넌트 기반 개발 방식에 잘 어울리는 스타일링 방법으로, 유지보수성과 재사용성을 높여줍니다. 동적인 스타일 적용이 쉽고, 클래스 충돌을 방지할 수 있어 개발자 경험도 개선됩니다. 상황에 따라 전통적인 CSS보다 더 유리할 수 있으므로, 프로젝트 특성에 맞게 선택하는 것이 중요합니다.