[React] 스타일링 Styled-Components

Styled-Components?

React에서 사용되는 대표적인 CSS-in-JS 라이브러리다

CSS-in-JS는 말 그대로 JavaScript 안에서 CSS를 작성할 수 있는 방식이다

원래 React는 CDD 컴포넌트 기반 개발을 도와주는 라이브러리다

컴포넌트 기반 개발은 화면을 독립적으로 재사용 가능한, 컴포넌트 단위로 구성하여 개발하는 방법론이다

 

지금까지 JS 코드 안에 JSX 문법으로 HTML 태그를 추가하는 식으로

JS + HTML 묶어서 만들어지는 형식이였다

여기서 CSS파일은 여전히 따로 파일을 만들어 코드를 작성해야했다

 

JS + HTML + CSS 다 묶어서 할 순 없을까?

이렇게 나온 개념이 Styled-Components 라이브러리다

CSS까지 JS파일에서 관리하게 되면

남는 파일은 jsx뿐으로 모든 것이 JS에서 관리할 수 있게 되는거다

 

 

설치방법 

npm install styled-components

먼저 라이브러리를 설치하기 위해 npm으로 install 해준다

 

import styled from "styled-components"

해당 라이브러리를 사용하고자 하는 파일에

import해서 불러와주면 된다

 

 

컴포넌트 만들기

const 컴포넌트 = styled.태그종류`
    CSS속성1: 속성값;
    CSS속성2: 속성값;
`;

// 예시문
const BlueButton = styled.button`
    background-color: blue;
    color: white;
`;

return <BlueButton>파란색 버튼</BlueButton>

이제 스타일을 가지는 컴포넌트를 생성할 수 있게 된다

styled 태그를 선택하고 원하는 속성을 지정해준 후 변수에 담아 사용하면 된다

 

JS에서 CSS를 작성하듯이 입력해주면 끝이다

 

하지만 치명적인 단점이 있는데...

CSS파일에서 작성할 땐 속성명도 값도 자동완성으로 불러올 수 있었지만

JS에서 입력할 땐 자동완성이 뜨지 않아 속성명, 값을 외워야하는 상황이 된다

여기서 VScode의 확장플러그인을 하나를 추천한다

 

VScode-styled-components 

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

vscode-styled-components - Visual Studio Marketplace

JS에서 CSS의 속성들을 자동완성시켜줄 수 있게 해주는 플러그인으로

CSS의 속성 풀네임을 외워야하는 불필요한 암기를 해결해준다

 

 

컴포넌트 재사용

styled 기능 중에 컴포넌트 재사용 기능으로

이미 만들었던 styled 컴포넌트를 다시 불러와 새로운 컴포넌트를 만들 수 있다

const 컴포넌트 = styled(재사용할 컴포넌트)`
    추가할 CSS속성1: 속성값;
    추가할 CSS속성2: 속성값;
`;

// 예시문
const BigBlueButton = styled(BlueButton) `
    padding: 20px;
    font-size: 2rem;
`;

return (
    <BlueButton>파란색 버튼</BlueButton>
    <BigBlueButton>큰 파란색 버튼</BigBlueButton>
)

컴포넌트 생성했을 때 만든 BlueButton을 가져와 예시로 들었다

위처럼 기존에 생성했던 것을 토대로 새로운 컴포넌트를 만들 수 있다

불필요한 중복 코드없이 간결한 구조를 유지할 수 있다

 

 

독특한 클래스명

컴포넌트를 만들고 사용해주면

클래스명으로 지정한 적 없는독특한 이름이 들어간 걸 확인할 수 있다

이는 styled에서 알아서 중복되지 않는 클래스명으로 지정해준 것인데

이 클래스명을 통해서 JS와 CSS를 매칭시켜 적용시켜주는 방식임을 엿볼 수 있다

 

 

 

Styled-Components 기술

Props 

const 컴포넌트 = styled.태그종류`
    CSS속성: ${ props => 함수코드 }
`;

const StyledButton = styled.Button `
    background: ${ props => props.color }
`

styled 컴포넌트도 같은 "컴포넌트"구성이기 때문에 props를 받아와

동적 변화등 여러가지 조작이 가능하다

탬플릿 리터럴 안에 JS코드를 어떻게 사용하느냐에 따라

무궁무진한 구현이 가능케된다

 

GlobalStyle (전역 스타일) 

styled를 사용하면 css파일 없애도 js파일 내에서 작성할 수 있지만,

css 스타일이 해당 js파일에 귀속된다

그럼 다른 js파일에서 똑같은 css 스타일이 필요할 때가 있을텐데

이럴 때를 대비해서 styled에서 전역스타일 컴포넌트를 마련해놨다

import {createGlobalStyle} from "styled-components"

const GlobalStyle = createGlobalStyle`
    전역 CSS속성1: 속성값;
    전역 CSS속성2: 속성값;
`;

변수에 담아 둔 후 <GlobalStyule />를 최상위 컴포넌트에 가져다 쓰면 끝이다