[React] - styled-component

styled-component를 사용하는 이유

리액트의 컴포넌트가 늘어나면서 각각의 스타일링을 하게 되면 여러 상황들이 생깁니다.

1. 제작한 class를 잊고 중복해서 만드는 상황
2. 스타일을 적용할 생각이 없는 컴포넌트에 적용 되는 상황
3. CSS 파일이 너무 길어져서 수정이 어려운 상황

이러한 상황들을 방지하기 위해서 styled-component를 이용하여 스타일을 바로 입힐 수 있습니다.

styled-component 라이브러리 설치

터미널에 라이브러리 설치하는 명령을 입력합니다.

npm install styled-components

or

yarn add styled-components

설치 후 사용할 컴포넌트에 import styled from 'styled-components' 를 입력하시면 됩니다.

styled-component 사용해보기

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼 테스트</YellowBtn>
      </Box>
    </div>
  )
}

1. div태그로 제작시 styled.div, p태그로 제작시 styled.p 식으로 작성하면 됩니다.
2. 문단은 끝에 백틱(``)기호를 이용하고 백틱사이에 CSS 스타일을 넣을 수 있습니다.
3. 변수 선언 방식으로 따로 저장해서 사용합니다.

styled-component의 장점