[React] styled-components

js 파일에다가 스타일을 입히는 방법이 있다.

아예 스타일을 입혀서 컴포넌트를 만드는 거다.

 

 

styled-components

npm install styled-components

터미널에 위 명령어 입력하고

(23.05.24 업데이트)

위 명령어 쓰면 npm ERR! Cannot read properties of null (reading 'edgesOut') 이런 오류가 뜬다.

위 명령어 대신 아래 명령어를 사용하자

npm install styled-components@5.3.10

import styled from 'styled-components'

맨 위에 import 해올거 해주면된다.

...import styled from "styled-components";

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

function Detail(props) {
...

  return (
    <div className="container">
      <Btn bg="blue">버튼</Btn>
...

Btn 이라는 컴포넌트를 만들어봤다.

지금은 button으로 해줬지만 div 나 p 등을 넣어도 된다.

오른쪽에 붙이는 것은 backtick 이다.

 

속성으로 쓸때마다 따로 지정해주고 싶어서 bg 라고 작명해줬다.(props)

color는 만약 bg가 blue 라면 white 로 하고 아니면 black 으로 하라는 js 프로그래밍을 해봤다.

 

장점

- css 파일 오픈 안해도 됨. 페이지 로딩시간 단축됨

- 여기 js파일에 적은 스타일은 다른 js 파일에 영향을 미치지 않음.

 

* 만약에 css 파일에서도 다른 파일에 영향이 안가게 하려면

(가령 App.css 가 App.js 에만 영향이 가게 하려면)

컴포넌트명.module.css 라고 파일이름을 바꿔주면 된다. 모듈화 기능임.

 

단점

- js 파일이 복잡해지긴함

- js 파일간 중복 디자인이 많다면 굳이 사용해야할 이유가...없음(css 파일이랑 다를게 없어짐)

- css 담당 디자이너가 있는데 styled-components 모르면,,, 쉽지않아짐.