Styled Components

Styled Components 

: CSS를 컴포넌트화 시키는 라이브러리

- 기존에 HTML, CSS, JS로 파일을 쪼개서 개발하던 방법에서 → JS 파일 안에서 컴포넌트 단위로 개발 할 수 있도록 함 

---

Styled Components 설치하기

- 터미널에 아래의 명령어로 라이브러리 설치하기

# with npm
$ npm install --save styled-components

- package.json에 다음 코드를 추가하도록 권장하고 있음 →여러 버전의 Styled Componets가 설치되어 발생하는 문제를 줄여줌

{
  "resolutions": {
    "styled-components": "^5"
  }
}

- Styled Components를 사용할 파일로 불러오면 사용 준비 완료!

mport styled from "styled-components"

---

Styled Components 문법

 

1. 컴포넌트 만들기

- 컴포넌트를 선언한 후 styled.태그 종류를 할당하고, 백틱 안에 기존에 CSS를 작성하던 문법과 같이 스타일 속성을 작성 

- 이렇게 만든 컴포넌트를 React 컴포넌트 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더 됨

 

 

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

- 컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해준 다음 추가하고 싶은 스타일 속성을 작성

 

 

3. Props 활용하기

- Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려 줄 수 있음

- 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능 

- props를 받아 오려면 props를 인자로 받는 함수를 만들어 사용하면 됨

 

1) Props로 조건부 렌더링하기

- 위의 코드의 경우 삼항 연산자를 활용해 <Button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없을 경우 white를 지정해주는 코드

 

2) Props 값으로 렌더링하기

- 위의 예시는 props.color가 없다면 white를 props.color가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴

 

- 꼭 삼항연산자만 사용해야 하는 것은 X! 자바스크립트 코드라면 무엇이든 사용할 수 있으므로 원하는 값을 사용할 수 있도록 만들어 사용하면 됨

- 위의 예시는 props.color의 값을 가져와서 스타일 속성 지정 없으면 white로 지정 

 

 

4. 전역 스타일 설정하기

- 1 전역 스타일을 설정하기 위해 Styled Componets 에서 createGlovaleStyle 함수를 불러옴

import { createGlobalStyle } from "styled-components";

- 2 그 다음 이 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
		margin : 2px;
		border-radius : 5px;
	}
`

- 3 이렇게 만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}