styled-components가 이런거군요?

📚 오늘은 스타일 덩어리를 공부해봅시다

🔨🔧🔨

styled-components는 패키지니까 설치가 우선!
npm 이면 위에꺼 한 줄 복사해서 터미널에 입력하시고~ yarn이면 아래꺼 고고
패키기 설치 전 항상 잊지 말아야 할 것: 터미널의 위치가 작성하려는 폴더에 있는지 확인 또 확인!

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

💻💻💻

다음은 JS파일에 import 하기! 아래 코드 파일 젤 위에 써주면 이제부터 styled-components 사용 가능

import styled from 'styled-components'

만약 버튼 태그에 스타일을 넣고 싶으면?
아래처럼 이렇게 백틱(``)안에 써주면 된답니다~

let Btn = styled.button `
	css속성 : 값;
`;

그리고 return문 안에 이렇게 써주면 됨

<Btn>나는 스타일 덩어리로부터 속성을 부여받은 버튼이지롱</Btn>

🤩🤩🤩

styled-components의 장점 꽤 있음
1. css파일 안열어도 됨
2. 스타일이 다른 JS파일로 오염되지 않음
원래 App.css 파일은 src의 모든 js 파일의 스타일에 연결되있음 (like defalt css?)
App.css의 범위를 App.js에만 한정할 수 있는 방법이 있음! (겁나 쉬움)
App.module.css 라고 바꿔주면 됨
3. 페이지 로딩시간 단축됨! 왜냐면 JS파일이 html에 입력되면서 styled-components는 style 태그로 자연스럽게 인식되서 + 해당 페이지 관련 파일만 로딩하면 되니까(필요없는 css 함께 업로드 안해도 됨) 로딩시간 향상됨!!

그렇다면 의문!! 속성노드들이 한 파일에 다 있으면 로딩시간이 단축되는 건가?? 그건 아닌듯하지만 다음에 로딩시간 단축하는 방법에 대해 공부해보기로 하자!! (공부할거+1)

어잇쿠야... 잠깐!!!
props... 너 왜 안나오나 했다. 기다리고 있었지
넌 여기서 어떻게 쓸 수 있니?

let Btn = styled.button `
	css속성 : ${props => props.a};
`;

만약 노란색 버튼도 쓰고 싶고 빨간색 버튼도 쓰고 싶은데 같은 걸 두개 만들기 싫잖아?
그럴때! props를 써주는 거야.. 바꿀 css 속성의 값을 ${props => props.a} 이렇게 넣어주고 색을 바꿔주고 싶을 때는 return문 안의 태그로 가서 아래처럼 이렇게 써줘. OK?

<Btn a ="(속성 값)" ></Btn>

styled-components의 이점이 또 있음!
JS파일에서 작업하는거라 조건문도 써줄 수 있음

color: ${(props) => props.a == 'blue' ? 'white' : 'black'};

심지어 전에 만들어 놓은 컴포넌트가 맘에 들면 복.붙.도 가능!

let NewBtn = styled.button(Btn)`
	css속성 : 값;
`;

😱😱😱

물론 단점도 있음!
1. JS 파일이 매.우. 복잡해짐
2. 중복 스타일은 컴포넌트 간 import 할텐데 css와 다를 바 없...
3. 협업할 때 css 담당자의 숙련도가 낮으면 어떻게 할꺼???ㅋㅋㅋㅋ

스타일덩어리들.. 더 알고 싶다면 여기

이 글은 거의 코딩애플 강의노트라고 보면 됩니다... 땡큐 코딩애플 라뷰소마취