[React] CSS를 대체할 수 있는 styled-components

목표

CSS를 사용하지 않고도 자바스크립트 파일 내부에서 스타일을 적용시켜본다.

 

기본설정

 1. 터미널을 연 뒤 프로젝트 폴더 경로로 이동하고 아래 명령어를 입력한다.

npm install styled-components

 

2. 사용할 컴포넌트 파일 위에 styled import

import styled from 'styled-components'

 

사용 방법

1. styled.적용시킬태그``

let YellowBtn = styled.button`
    background : ${props => props.bg};
    color : ${props => props.bg =='blue'?'white':'black'};
    padding : 10px;
`

let Box = styled.div`
    background : grey;
    padding : 20px;
`

`` 안에 적용시킬 스타일을 작성한다.

위 문장은 props 문법을 활용하여 사용자가 해당 컴포넌트를 사용할 때 임의의 값을 입력시킬 수 있도록 하였다.

 

2. 사용 예시

<Box>
    <YellowBtn bg="blue">버튼</YellowBtn>
    <YellowBtn bg="orange">버튼</YellowBtn>
</Box>

 

장단점

장점

1. CSS 파일 없이 자바스크립트 파일 내에서 스타일 적용 가능

2. 다른 JS 파일로 스타일 오염 방지 가능

3. 페이지 로딩시간 단축

 

단점

1. JS 파일 복잡해짐

2. 다른 파일에서 스타일 가져가려고 할 때 불편

3. CSS 담당 디자이너가 스크립트문을 모를 수 있어 협업시 불편

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌