styled-component 사용법

원래는?

html을 담은 파일을 꾸며주기 위해서는 별도의 css파일이 필요했다.
하지만 이 styled-components를 사용하면 별도의 css파일 없이도 html을 꾸며줄 수 있다.

styled-component 설치 & 사용

터미널을 열어서

npm install styled-components

를 쳐주면 설치가 된다.
그리고

import styled from 'styled-components';

를 해오면 사용할 수 있다.

예시

Detail이라는 컴포넌트에서 styled-component를 사용해 보도록 하겠다.

import styled from 'styled-components';

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

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

이렇게 하면 Detail 컴포넌트 안에 있는 또 다른 컴포넌트들이 꾸며지게 된다.

※주의 할 점은 styled.div 옆엔 ''가 아닌 백틱인 ``이다.

props로 재활용 하기

노란 버튼이 아닌 오렌지색 버튼이 필요할땐?
props를 사용해서 기존 컴포넌트를 살짝 바꿔주면 된다.

import styled from 'styled-components';

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

function Detail(){
	return(
		<div>
        	<YellowBtn bg="orange">오렌지색
              버튼</YellowBtn>
        	<YellowBtn bg="blue">파란색
              버튼</YellowBtn>
        </div>
    )
}