#JS에서도 CSS를? styled-component

1. 먼저 터미널에 styled-component를 설치해준다.

npm install styled-components

 

2.  styled-component를 사용할 js파일에 import 해준다.

import styled from 'styled-components'

 

3. 아래와 같이 YellowBtn이라는 컴포넌트를 만든다고 생각하고, styled.button 뒤에 백틱 ``을 열어 그안에 css파일처럼 속성을 적어준다. 다음에 컴포넌트를 삽입할 함수 안에 <YellowBtn></YellowBtn> 으로 넣어준다.

import styled from 'styled-components';

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

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

 

4. 버튼의 색을 가변적으로 바꿔 넣고 싶다면, props로 활용해 넣을 수 있다. props.임의지정 으로 값을 임의로 정해줄 수 있다. 그다음 컴포넌트에 props 값을 넣어준다.

import styled from 'styled-components';

let YellowBtn = styled.button`
	background : ${ props => props.bg(props뒤에 값은 임의로 지정) };
    color : black;
    padding : 20px;
`

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn bg="yellow">버튼임</YellowBtn>
      </Box>
    </div>
  )
}

 

5. styled-component의 장점은 값들을 구멍내어 넣을 수도 있고, 함수로 넣을 수도 있다.

import styled from 'styled-components';

let YellowBtn = styled.button`
	background : ${ props => props.bg(props뒤에 값은 임의로 지정) };
    color : ${ props => props.bg == 'blue' ?  'white' : 'black' };
    padding : 20px;
`

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn bg="blue">버튼임</YellowBtn>
      </Box>
    </div>
  )
}

 

6. styled-component의 단점

단점1. JS 파일이 매우 복잡해집니다.
그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.
 
단점2. JS 파일 간 중복 디자인이 많이 필요하면 어쩌죠?
다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 됩니다.
근데 그럼 CSS파일 쓰는거랑 차이가 없을 수도요
 
단점3. CSS 담당하는 디자이너가 있다면 협업시 불편할텐데 
그 사람이 styled-components 문법을 모른다면 
그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요하겠군요.
그래서 신기술같은거 도입시엔 언제나 미래를 생각해보아야합니다.