React : styled-components 라이브러리

2022.06.29 TIL

---

npm install styled-components

↑ 라이브러리 설치 명령어.

import styled from 'styled-components'

임포트하면 라이브러리 사용 준비 완료.

---

사용 예

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

`(물결표) 로 묶어서 그 안에다가 css와 동일하게 작성하면 됨.

변수에 담으면 컴포넌트와 동일하게 사용할 수 있음. ↓

<BlackBox>
            <p>ㅎㅇ</p>
</BlackBox>

props를 이용할 수 있음.

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

JS 문법을 이용하면 조건식도 구현할 수 있음.

컴포넌트로 사용 ↓

<ColoredButton bg="blue">버튼 ㅇㅇ</ColoredButton>
<ColoredButton bg="orange">버튼 ㅇㅇ</ColoredButton>

---

style-components 라이브러리를 사용하는 이유

• 다른 JS 파일이 오염되지 않음.
• 페이지 로딩시간 단축.
  
  
  
  
  
  

---

참고:
리액트에서 웹을 빌드할 때 압축을 하기 때문에,
CSS 파일을 하나만 만들어도 모든 JS 파일에 영향을 끼침.

:: 해결법 ::

File.module.css 로 작성하면 File에만 영향을 끼치게 할 수 있음.