✨ Styled Components 란?
- React와 함께 사용되는
CSS-in-JS라이브러리로, 컴포넌트 단위로 스타일을 작성할 수 있도록 도와줍니다.CSS-in-JS란 ?... JavaScript 코드 안에서 직접 CSS를 작성하는 방식. 즉, CSS 파일이 따로 존재하지 않아도 됨 - 동적인 스타일 적용과 컴포넌트 기반의 스타일링을 가능하게 합니다.
[기존_React]
[Styled Components를_사용한_React]
⚙️ 기본 설치 및 사용
[ 설치 ]
npm install styled-components
[ 불러오기 ]
import styled from "styled-components"
[ 추가_Extension ]
CSS 속성 자동완성 기능 : vscode-styled-components
1️⃣ 컴포넌트 만들기 (const)
✔️ [ 컴포넌트 _ 선언 ]
const 컴포넌트이름= styled.태그종류`
CSS속성1 : 속성값;
CSS속성2 : 속성값;
`;✔️ [ 컴포넌트 _ 사용 ]
<컴포넌트이름> 내용 </컴포넌트이름>💡 [ 예시 ]
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const App = () => {
return <Button>클릭하세요</Button>;
};
export default App;➡️ 결과: 해당 Button 컴포넌트는 스타일이 적용된 상태로 렌더링됨.
- const Button = styled.button` 속성명: 속성값 `;
styled-components는 scss 문법을 지원한다
→&:hover는 SCSS 사용법과 동일하게 자기 자신을 뜻한다.
→ 변수나 mixin은 사용 불가하지만 중첩 사용 가능
→ 변수나 mixin은 css 코드가 아닌 JS 를 이용하여 구현 가능하다
2️⃣ 컴포넌트 재사용
✔️ [ 컴포넌트 _ 선언]
const 컴포넌트이름= styled(재사용할 컴포넌트)`
추가할 CSS속성1 : 속성값;
추가할 CSS속성2 : 속성값;
`;💡 [ 예시 ]
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const ButtonReSize = styled(Button)`
width: 200px;
height: 70px;
`;
const App = () => {
return (
<Button>클릭하세요</Button>;
<ButtonReSize>버튼 사이즈를 지정하여 재사용 하는 컴포넌트</ButtonReSize>
)
};
export default App;🖥️ [ 실행_화면 ]
➡️ 결과
"클릭하세요"버튼에 적용한 Button 컴포넌트를 재사용 하는 컴포넌트 버튼에 적용한 ButtonReSize 컴포넌트를 만들어서,
크기만 다르게 설정해주었다
◼️ 추가 내용 - [class명 자동 부여]
- [페이지검사] -> [엘리먼트 탭]을 보면 해당 버튼에 클래스명 무작위 자동부여
styled-components를 생성할 때 자동적으로 겹치지 않는 클래스명을 해당 엘리먼트에 부여하며,
이 클래스명을 사용하여 작성한 css 코드와 요소를 매칭시켜서 css 코드를 매칭시켜서 styled-components 를 완성 시켜준다- 기본
Button이라는 컴포넌트에는 클래스 명이 alkk sjsj 로 부여 되었다면,
기본 Button 을 이용한 재사용 컴포넌트ButtonReSize에는 alkk djdj sjsj vhju 이런 식으로 기본 컴포넌트 클래스 명이 포함되어 있다
3️⃣ props 사용
✔️ [ props_선언 ]
const 컴포넌트이름= styled.태그종류`
CSS속성 : ${ props => 함수 코드 }
`;✔️ [ props_사용 ]
<컴포넌트이름 함수코드="원하는 속성"> 내용 ! </컴포넌트이름>💡 [ 예시 ]
const Button = styled.button`
background-color: ${(props) => (props.primary ? "blue" : "gray")};
color: ${(props) => props.textColor || "white"};
padding: 10px 20px;
`;
const App = () => {
return (
<>
<Button primary>Primary 버튼</Button>
<Button textColor="black">textColor 버튼</Button>
</>
);
};➡️ 결과
<Button primary\>Primary 버튼</Button\>: background-color를 선언한 primary 함수가 true 이면 속성값을 blue로 false일 경우 gray로 조건식<Button textColor="black"\>textColor 버튼</Button\>: color를 선언한 textColor 함수의 기본 값은 white이지만, black 으로 지정
4️⃣ 전역 스타일 설정하기
⚙️ [ import ]
import { createGlobalStyle } from "styled-components"✔️ [ 전역스타일_선언 ]
const GlobalStyle = createGlobalStyle`
전역 CSS속성1 : 속성값;
전역 CSS속성2 : 속성값;
`;✔️ [ 전역스타일_사용 ]
< GlobalStyle /> //최상위 컴포넌트에 가져다 쓰기!- 🚨 주의 사항
- 컴포넌트처럼 JSX에 감싸는 방식이 아니라, 함수 호출처럼 사용, JSX 내부에 자식 요소를 포함하면 안 됨.
<GlobalStyle>...</GlobalStyle>❌<GlobalStyle />✅
💡 [ 예시 ]
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #8ec4fa;
color: #333;
display: flex;
justify-content: center;
text-align: center;
}
`;
const App = () => {
return (
<>
<GlobalStyle />
<h1>Styled Components Global Style</h1>
<p>전역 스타일이 적용되었습니다.</p>
</>
);
};
export default App;🖥️ [ 실행_화면 ]
➡️ 결과
body의 기본 폰트와 배경색, flex 정렬이 설정됨*를 사용하여 margin, padding 초기화 (CSS 리셋)
-- 여기에 rgb 값 바뀌는 프로젝트 링크 넣으셈
[전체 화면 배경색을 Input(range로 RGBA 값 지정하여 변경하는 실습 파일]
🖇️ !! 링크 클릭 !!
🖥️ [ 실행_화면 ]
💄 Styled Components 장단점
❇️ 장점
- CSS 중복 제거: 컴포넌트 단위로 스타일을 관리하여 유지보수 용이
- 가독성 향상: JS 안에서 CSS를 선언하므로, 스타일과 로직이 함께 관리되어 상호작용이 쉬움
- 스타일 격리 보장: 각 컴포넌트의 스타일이 고유하여 CSS 충돌 방지
- 동적 스타일링 가능: props나 state를 활용한 유연한 스타일 적용 가능
- Class 이름을 자동 부여
❎ 단점
- CSS 대비 추가 학습이 필요하다
- 자동 부여되는 Class명이 깔끔하지 않다.
- JavaScript의 크기가 커진다(JS 파일 안에 CSS 코드가 포함되기 때문에 커질 수 밖에 없다)
🔥 Styled Components vs. 일반 CSS 비교
| 비교 항목 | 일반 CSS | Styled Components |
|---|---|---|
| 스타일 적용 방식 | 전역 스타일 | 컴포넌트 단위 스타일 |
| 유지보수 | 스타일 충돌 가능 | 컴포넌트별 스타일 격리 |
| 동적 스타일 | 제한적 | props를 활용한 동적 스타일 가능 |
| 코드 가독성 | 스타일과 로직 분리됨 | 한 파일에서 스타일과 로직 관리 가능 |
