styled component

목차
1. styled components?
2. css는 사용하지 않을까?
3.어떻게 사용하지?

1. styled components?

• css파일이 아닌 js 문법을 통해 컴포넌트에 스타일을 적용할 수 있게 하는 라이브러리

기존 html에서 요소에 스타일을 줄 때 스타일 태그를 이용하거나 스타일이 적용된 클래스를 필요한 요소에 부여하는 방법들을 사용하였다. react에서 전통적인 방법을 사용하기도 하지만 . styled components 모듈을 통해  스타일이 적용된 단일 요소를 컴포넌트로 만들어 사용하는 방법을 이용하기도 한다. 왜 사용하는지 장점과 사용하는 방법을 알아보도록 하자.

 

장점

1 ) 클래스 명 중복 제거

▶ css파일로 관리를 할 경우 파일이 많아지면 작업자에 따라 작성된 클래스명이 중복될 수 있고 웹팩을 통한 번들링을 통해 코드가 하나로 합쳐질 경우 우선순위에 의해 원하는 스타일이 적용되지 않을 수 있다. 

▶ styled component는 고유의 클래스명을 자동으로 지정하도록 하여 버그가 발생하지 않는다.

 

2) 유리한 유지보수

▶ html 요소에 적당한 스타일을 적용하기 위해 css스타일을 찾아보며 필요한 클래스를 찾을 필요가 없다.

 

3) 브라우저 호환

▶ 벤더 프리픽스를 자동으로 제공하므로 브라우저 호환성을 신경쓸 필요가 없다.

2. css는 사용하지 않을까?

styled component를 사용하면 css전혀 사용되지 않는건가? 물론 아니다. styled component가 기존 css 방식보다 효율적일 수 있지만 상황에 따라 css을 사용하기도 한다.

 

1) 전역 스타일링이 필요한 경우

▶ 기본적으로 태그에 지정되는 margin이나 padding을 제거하거나 특정 태그들의 기본 스타일을 변경하는 경우 css파일을 사용하여 스타일을 지정하는 것이 더 효율적일 수 있다.

 

2) 반응형 디자인

▶ 다양한 화면의 크기에 맞추어 스타일을 다르게 지정해야할 경우 css파일로 작업하는 것이 더 직관적이고 효율적일 수 있다.

 

3) 성능 최적화가 중요한 경우 

▶ styled component의 경우 빌드를 하면 크기가 커지고 런타임에 js가 직접 스타일을 처리하기에 성능에 영향을 줄 수 있으나 css는 캐시에 저장되어 초기 로딩 속도를 줄일 수 있다.

3.어떻게 사용하지?

1) 모듈 설치

npm을 통해 외부 모듈인 styled components를 설치한다.

npm install styled-components

 

2) 스타일 컴포넌트 생성

스타일 컴포넌트를 생성하는데 설치된 styled-components를 가져와 태그를 생성한다. 이 때 해당 태그에 스타일을 적용할 수 있는데 반드시 백틱(``)안에 적용해야 한다.

import styled from 'styled-components';
const 컴포넌트명 = styled.태그명`
    지정할 스타일
`

//ex) Style.jsx
export const DivComponent = styled.div`
    width:100px;
    height:100px;
    background-color: #000000
`

3) 렌더링

스타일 컴포넌트를 만들었다고 해서 바로 렌더가 되는 것이 아니고 실제 렌더가 될 컴포넌트에 가져와 사용해야 적용된다.

import {DivComponent} from 'Style'

const TestComponent = ()=>{
    return (
        <DivComponent/>
    )
}

 4) 결과

만들어진 컴포넌트의 스타일이 잘 적용되었음을 볼 수 있다.