🔍 styled-components 란?
리액트에서는 JSX 문법을 사용하여 컴포넌트내에서 자바스크립트와 HTML 을 한번에 작성할 수 있는데, styled-components 라이브러리를 사용하면 CSS 까지 한 컴포넌트 내에서 처리할 수가 있다.
또한 컴포넌트가 많을때 CSS 처리의 문제점은
- Class를 만들어 놓은것을 중복해서 만들거나
- 원하지 않는 컴포넌트에 스타일이 먹여지거나
- CSS 파일이 너무 길어져서 가독성이 떨어지거나
등의 문제점이 있는데 styled-components가 이런 문제점을 해결해준다.
🔍 styled-components 설치 및 사용법
1. 터미널에 npm install styled-components 입력
npm install styled-components 터미널에 위의 문구를 입력해주면 설치가 자동으로 된다.
2. 사용하고 싶은 컴포넌트에서 import 해오기
import styled from 'styled-components'3. 컴포넌트 바깥에서 스타일 지정하고 변수선언해주기
import styled from "styled-components";
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`
function Detail(props) {
<YellowBtn>버튼</YellowBtn>
}이 styled-components도 컴포넌트이기때문에 메인 컴포넌트 바깥에서 선언을 해주고 메인 컴포넌트 내에서 컴포넌트로 불러와서 사용하면 된다.
지정한 스타일이 먹여진 컴포넌트가 불러와졌다.
🔍 props 를 이용한 styled-components
만약에 위에 있는 저 노란색 버튼과 동시에 오렌지색 버튼이 필요하다면 어떻게 할까?
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`
let OrageBtn = styled.button`
background : orange;
color : black;
padding : 10px;
`이런식으로 따로따로 styled-components 를 만들어줄 수 있겠지만 비효율적이다.
이럴때 props 를 사용하여 비슷한 컴포넌트지만 바꿔야 할 부분들을 각각 다르게 적용 시킬 수 있다.
let Btn = styled.button`
background : ${props => props.작명};
`위의 코드의 뜻은 컴포넌트 내에서 Btn이라는 컴포넌트를 사용할 때, 저 "작명" 이라는 props 를 사용할 수 있다는 뜻이다. (작명은 자유롭게 네이밍 하면 된다)
<Btn 작명= 'blue'>버튼</Btn>
지정한 색깔대로 값이 잘 나오는걸 확인할 수 있다.
삼항연산자를 이용해서 배경이 오렌지색일때는 글자가 검은색, 파란색일때는 글자가 하얀색으로 나오게 할 수도 있다.
let Btn = styled.button`
background : ${props => props.bg};
color : ${props => props.bg == 'blue' ? 'white' : 'black'};
padding : 10px;`
<Btn bg= 'blue'>버튼</Btn>
<Btn bg= 'yellow'>버튼</Btn>
🔍 styled-components 의 장점
-
CSS 파일을 열 필요 없이 컴포넌트 내에서 CSS 지정이 가능하다.
-
styled-components를 사용한 파일 내에서만 CSS 가 적용되고 다른 파일로 오염되지 않는다.
일반적으로 CSS를 적용시킨다 할때, App.css 에서 스타일을 적용시킬텐데 그렇게 하면 적용시키고픈 컴포넌트에만 적용될 뿐 아니라 다른 컴포넌트에도 스타일이 적용될 수 있다. -
페이지 로딩시간이 단축된다.
CSS파일을 별도로 만들어주는 것이 아니라 HTML 내에서 style태그를 주입시키는 것이므로 로딩시간이 향상 될 수있다.
🔍 styled-components 의 단점
-
HTML의 구조가 복잡해진다고 하면, 그에 맞게 CSS도 복잡해지므로 가독성이 안좋을 수 있다.
-
다른 파일에서 똑같은 스타일을 가져오고 싶다면 컴포넌트간에 import를 해서 사용을 하면 되지만 이렇게 된다면 일반 CSS 와 별반 차이가 없게 된다.
-
만약에 팀으로 협업을 한다고 가정했을때, 상대방이 styled-components를 모른다면 다시 CSS 파일로 변환을 해야하는 문제가 발생할수도 있다.
❗️ 사실 각각의 CSS 파일명에 module을 붙여주면 해당하는 파일에만 CSS가 적용된다 ❗️
예를 들어서 App.js에만 CSS 를 적용시키고 싶은 CSS 파일을 만든다면 App.module.css를 만들어주고
Detail.js 에만 CSS 를 적용시키고 싶은 CSS 파일을 만든다면 Detail.module.css를 만들어주면 된다.
이렇게하면 각각 파일에 맞게 따로따로 CSS가 적용이 된다.
