React : styled-components (설치 , 사용, 장단점), css파일 js에 종속시키기

styled-components

컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다.

---

설치

터미널에 아래 코드를 입력한다.

npm install styled-components

* 현재 version6 이후 해당 명령어 입력 시 문제가 발생하고 있어서, npm install styled-components@5.3.10로 입력했다.

그리고 사용하고 싶은 컴포넌트 맨 위에 import해온다.

import styled from 'styled-components'

---

사용

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>
  )
}

• styled.div``;
  styled 뒤에 태그명을 넣고 백틱 기호 안에 스타일을 넣는다.
• 변수 안에 넣어서 사용한다.

---

응용

props 문법을 이용해서 살짝씩 다르게 만들 수 있으며, 간단한 프로그래밍도 가능하다.

let EventBtn = styled.button`
  background: ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding: 10px;
  margin: 20px auto;
  border: 1px solid #ddd;
`
function Detail(){
  return (
    <div>
      <EventBtn bg="skyblue">이벤트 바로가기</EventBtn>
      <EventBtn bg ="blue">이벤트2 바로가기</EventBtn>
    </div>
  )
}

기존 스타일을 복사도 할 수 있다.

let EventBtn = styled.button`
  background: ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding: 10px;
  margin: 20px auto;
  border: 1px solid #ddd;
`
let MoreBtn = styled(EventBtn)`
  border: 1px solid #aaa;
`

function Detail(){
  return (
    <div>
      <EventBtn bg="skyblue">이벤트 바로가기</EventBtn>
      <EventBtn bg ="blue">이벤트2 바로가기</EventBtn>
      <MoreBtn bg ="#ddd">이벤트2 바로가기</MoreBtn>
    </div>
  )
}

---

장점

• 스타일이 다른 js 파일에 영향을 끼치지 않는다.
• css 파일을 열지 않아도 js파일 안에서 해결가능하다.
• 페이지 로딩시간이 단축된다.

단점

• js파일이 복잡해진다.
• 중복스타일은 컴포넌트간 import하게 되는데, 그러면 css와 다를 바 없다.

---

CSS파일 종속시키기

App.js
App.module.css

컴포넌트.module.css로 파일명을 지으면 해당 css파일이 컴포넌트.js파일에 종속된다.

---

출처 : 코딩애플 https://codingapple.com/