오늘의 React

1.1 style-components

- 이제까지 배웠던 style을 꾸미는건 className을 넣고 css 파일로 이동해야했다. 

- 귀찮으니 style-components를 사용해보자.

// 이런식으로 styled.만들고 싶은거 + ``백틱 기호 안에 꾸미고 싶은거 꾸미고 변수로 정의하고
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`

<yellowBtn>버튼</yellowBtn>

1.1.1 style-components의 장점

- css 파일 안 열어도 된다.

- 스타일이 다른 js파일로 오염되지 않는다. (vue.js scoped와 비슷하다.)

- 기존 css파일의 스타일은 다른 js의 파일에 적용되기도 한다.

- 기존 css파일의 오염을 방지하려면 컴포넌트.module.css

- 페이지 로딩시간 단축

- html에 자동으로 <style></style>을 주입해준다. 

 

- 만약 버튼의 색깔을 style을 변경하지 않고 바꾸려면? props를 사용

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

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

 

- 조건문도 사용할 수 있다.

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

 

 

1.1.2 style-components의 단점

-Js 파일이 매우 복잡해진다.

- 중복스타일은 컴포넌트간 import할텐데 기존의 CSS 방식과 다를게 없다.

- 협업시 CSS 담당의 숙련도가 이슈

- 도입여부가 중요하다.