112. [MAX] Styled-Components 기본 사용법

Styled-Components란?

리액트로 넘어오면서 CSS를 설정할 때 기존의 방식은 사용이 불가능하고, CSS를 객체 형태로 만들어야 하기 때문에 CSS의 값을 문자열로 설정한다든지, background-color 등을 대쉬를 빼고 camelCase 등의 방식으로 backgroundColor처럼 명명해야 한다든지 불편한 점이 있어 등장한 패키지이다.

CSS를 별도의 CSS 파일에서 지정하지 않고, 컴포넌트 내에서 바로 작성이 가능하도록 도와준다.

사용 방법

패키지 설치하기

 npm install styled-components

import 하기

import { styled } from 'styled-components';

스타일링 하기

함수형 컴포넌트가 선언된 곳 위, Import문 아래에서 바로 스타일링을 하면 된다.

아래와 같이 styled.로 시작하고, 뒤에는 적용시킬 태그를 입력한다. 그리고 백틱(템플릿 리터럴)을 이용해서 CSS를 작성하듯이 스타일링을 한다.

import { styled } from 'styled-components';

styled.div`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
`

function App() {
    return (
        <>
            <div className="container">
                컨트롤 영역입니다.
            </div>
        </>
    );
}

export default App;

변수에 할당하기

CSS는 보통 특정 class를 가진 요소에만 추가하는 방식으로 사용한다. 방금 만든 것 또한 하나의 스타일드 컴포넌트로서, 자유롭게 작명을 해서 사용할 수 있다.

const HomeContainer = style.div`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
`

기존 UI에 컴포넌트 호출하기 (대체하기)

변수에 할당까지 완료됐다면 이 커스텀 컴포넌트를 사용할 곳으로 가서 여는 태그와 닫는 태그를 모두 대체해주면 된다.

import { styled } from 'styled-components';

const HomeContainer = styled.div`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
`

function App() {
    return (
        <>
            {/* 여기 div를 태체 */}
            <HomeContainer>
                컨트롤 영역입니다.
            </HomeContainer>
        </>
    );
}

export default App;

유의사항

이 문서에서의 예제는 App 컴포넌트에서만 사용할 스타일드 컴포넌트이기에 이 컴포넌트 파일에서 스타일드 컴포넌트를 정의하고 있지만, 만약 이 스타일을 여러 컴포넌트에서 공유한다면 별도의 스타일 컴포넌트 또는 레이아웃 컴포넌트로 분리해서 여러군데에서 컴포넌트를 import하여 사용하는 것이 유지보수 측면에서 효율적이다.

그리고 우리가 별도로 class명을 지정하진 않았지만 개발자 도구로 열어보면 임의의 Hash 값이 class 이름으로 지정되어 있는 것을 알 수 있다.

이것은 랜덤하게 형성된 것이 아니라 템플릿 리터럴 안에 있는 내용에 따라 Hash가 생긴 것이다. 즉 이 말은 어떤 이벤트에 따라 CSS가 계속 변하는 스타일링을 할 때 초당 수 백 개의 Hash가 생성될 수 있어 웹 페이지에 과부하가 걸려 에러가 나게 된다. 이럴 때는 처리하는 방법이 따로 있으나 지금 단계에서는 다루지 않겠다.