컴포넌트가 많은 경우 스타일링을 하다보면 몇가지 문제가 발생할 수 있는데
-
class명을 중복해서 만든다.
-
다른 컴포넌트에 원하지않는 스타일이 적용되거나 (오염된다.)
-
CSS 파일이 너무 길어져서 수정이 어려워진다.
이러한 경우에 따로 CSS파일을 생성하지 않고 컴포넌트에 스타일을 바로 입힐 수 있는데
styled-components 라이브러리를 설치하여 사용하면 된다.
설치 방법
npm install styled-components터미널에 입력하면 라이브러리 설치가 되며
import styled from 'styled-components'사용하고 싶은 컴포넌트 상단에 import하면 사용할 수 있다.
기본 문법
const 컴포넌트이름 = styled.html태그종류`
CSS 속성 ( CSS문법과 동일 )
`;html태그 종류는 div, button, p, a 등을 얘기하는 것이고
`` 백틱으로 감싸줘야 하는것에 주의하자
장점
-
css파일 오픈 없이 js파일에서 바로 디자인이 가능하다.
-
styled-components로 작성한 디자인은 다른 js파일에서 적용되지 않는다.
(className 등이 동일해도 오염되지 않는다.) -
페이지 로딩시간이 줄어든다.
(styled-components는 html의<style>안에 넣어주기 때문이다. -
props 문법 및 js문법 사용이 가능하다.
props 문법 사용
box의 color을 바꾸는 ㅇㅇ
const box = styled.div`
background: ${props => props.bg};
padding: 20px;
`;
(생략)
<box bg="black"></box>
<box bg="white"></box>이러면 검정 box 흰색 box 하나씩 생성된다.
js문법 사용
box색에 따라 color을 다르게 주고싶다면
const box = styled.div`
background: ${props => props.bg};
color: ${props => props.bg == 'black' : 'white' ? 'black'};
padding: 20px;
`;
(생략)
<box bg="black"></box>
<box bg="white"></box>이렇게되면 검정일때 글자색은 흰색
아닌 경우에는 검정색이다.
디자인 재활용
같은 컴포넌트 내라면 디자인이 재활용이 가능한데
위에서 작성한 box 디자인에서 조금만 수정하고싶다면
const box = styled.div`
background: ${props => props.bg};
color: ${props => props.bg == 'black' : 'white' ? 'black'};
padding: 20px;
`;
const newBox = styledbox()`
추가로 수정할 부분
`;이러면 newBox에는 box의 디자인에 그대로 복사된다.
전역 디자인
import { createGlobalStyle } from "styled-components";
를 사용하면 전역디자인이 가능한데
const GlobalStyle = createGlobalStyle`
button {
padding:5px;
margin:2px;
border-radius:5px;
}
`;전ㅇㄱ디자인을하고 함수에서
function App(){
return(
<>
<GlobalStyle></GlobalStyle>
<Button>전역 스타일 적용하기</Button>
</>
)
}단점
-
상단에 스타일이 들어가므로 JS 파일이 매우 복잡해진다.
(그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.) -
JS 파일 간 중복 디자인이 많이 필요하면 즉 디자인 재활용을 할때
다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 됩니다.
근데 그럼 CSS파일 쓰는거랑 차이가 없을 수도요 -
. CSS 담당하는 디자이너가 있다면 협업시 불편할텐데
그 사람이 styled-components 문법을 모른다면
그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요하겠군요.
그래서 신기술같은거 도입시엔 언제나 미래를 생각해보아야합니다.
여러분이 App.css 파일을 만들어서 App.js에서 import해서 쓴다고 해도
거기 적은 클래스명들은 Detail.js까지 사용가능합니다. (오염됨)
프로젝트 사이즈가 작을 땐 편리하겠지만 사이즈가 커지면 관리하기 힘들어집니다.
그럴 땐 styled-components 써도 되지만 그냥 CSS파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공하는데
컴포넌트명.module.css
이렇게 CSS 파일을 작명하면 됩니다.
그리고 컴포넌트명.js 파일에서 import 해서 쓰면 그 스타일들은 컴포넌트명.js 파일에만 적용됩니다
