설치

$ npm i styled-components

• Styled Component에서 package.json에 다음 코드를 추가하도록 권장하고 있습니다. 아래 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여줍니다.

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

---

사용법

tagged template literals라는 ES6문법을 이용하여 js 파일에 작성하므로 별도의 CSS파일 없이 스타일 속성을 지닌 컴포넌트를 만들 수 있습니다.

• import

import styled from "styled-components";

• 사용

const ComponentName = styled.Tag`
	color: tomato;
	text-align: center;
`

---

props

Styled Components는 스타일 속성을 지닌 컴포넌트를 정의할 때 함수를 전달하고, 그 함수 안에서 props를 사용할 수 있습니다.

const Title = styled.h1`
	color: ${(props) => props.color ? props.color : "white"};
	text-align: center;
`

const App = ()=>{
 return (
   <>
   	<Title color="tomato">Styled Component</Title>
   </>
   )
}

---

상속

같은 스타일을 지닌 컴포넌트에서 약간의 변화를 주고 싶을 때 상속하여 새로운 컴포넌트를 만들 수 있습니다.

const Title2 = styled(Title)`
	//...Title와 같다.
	font-size: 32px;
`

---

추가학습

기본 규칙

• Styled Component를 정의할 땐, React Component 밖에서 이루어져야 합니다. 만약 React Component 안에서 정의되면 리렌더링 될 때마다 스타일 속성을 지닌 컴포넌트가 매번 재정의되어 렌더링 속도 저하에 영향을 끼칠 수 있습니다.

좋은 예시

const Header = styled.header`
	// ...
`

const App = ()=>{
  return <Header>헤더</Header>
}

나쁜 예시

const App = ()=>{
  const Header = styled.header`
	// ...
  `
  return <Header>헤더</Header>
}

---

중첩 스타일링

& 기호를 사용하여 중첩 스타일을 적용할 수 있습니다.

const Header = styled.header`
	&:hover {
	  // ...
	}
`

• &:hover 가상 클래스 적용
• & ~ & 형제
• & + & 인접 형제
• &.className 인접 클래스

---

자식 셀렉터

&를 사용하지 않으면 자식 셀렉터에 스타일을 적용할 수 있습니다.

const Header = styled.header`
	.className {
	  ...
	}
    #id{
      ..
    }
`

• .className 자식 class
• #id 자식 id