[React] styled-components

 

1. 설치

npm install styled-components

 

npm ERR! Cannot read properties of null (reading 'edgesOut')

이런 에러가 발생했다면? 버전6을 설치하려 했을 때 (최신버전) 에러가 나는 것이다.

npm install styled-components@5.3.10

5.3.10 버전으로 설치해본다!

 

npm ERR! Cannot read properties of null (reading 'edgesOut')

 

 

2. 사용법

import styled from 'styled-components';

쓰고 싶은 파일에 styled-components를 import 해준다.

 

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

import 해 온 기능을 이용해 스타일을 정의한다.

정의한 스타일을 변수로 저장해 가져다 쓰는 것이다.

 

<YellowBtn bg="blue">버튼</YellowBtn>

이런식으로 props를 날려주면 styled-components에서 받아서 동적으로 스타일을 변경시킬 수도 있다.

 

 

 

3. 장점

기존 css의 경우 중복된 스타일을 구분하지 못하고 계속해서 생성하는 경우가 있다.

또한 App.css로 css파일이 하나로 합쳐지기 때문에 이름이 같은 class의 경우 내가 원치 않는 스타일로 매겨지는 경우가 있을 것이다.

 

하지만 styled-components는 각 js 파일마다 구분되어 적용되기 때문에 중첩 스타일이 매겨질 이유가 없다.

페이지 로딩시간도 더 단축된다.

 

근데 사실 css도 스타일 간섭을 막기 위해 컴포넌트명.module.css이라고 써주면 해당 컴포넌트에만 쓸 수 있는 css 파일로 만들어준다.

 

 

4. 단점

근데 딱봐도 js 파일 길어지게 생겼다. js 파일이 복잡해지는 단점이 있다.

또한 프론트 스타일 담당자가 있다면 내가 해당 파일을 건들이고 있을 때 수정을 못하므로 협업 시에도 많은 난관이 있을 것이다.