[React] Styled Component 이해하기

Styled Component 이해하기

• Styled Component란?
• 예시
• 심화

---

Styled Component란?

기존에 사용하던 HTML의 태그를 style을 설정하여 component로 만든 것을 Styled Component라고 합니다.

이러한 Styled Component를 만드는 방법은 아래의 코드와 같습니다.

Styled Component를 사용하기 위해서는 styled-components라는 패키지를 다운로드하여야 합니다.

다운 방법은 npm i styled-components라는 명령어를 통하여 다운 가능합니다.

const 컴포넌트 이름 = styled.적용할 태그 이름`
	적용할 스타일
`

``(탬플릿 리터널) 사이에 적용할 스타일을 입력하시면 됩니다.

적용할 태그는 HTML의 태그를 작성해주시면 됩니다. 컴포넌트를 div로 사용하고 싶다면 태그 이름에 div를 작성하시면 됩니다. 단 컴포넌트 이름의 첫 글자는 대문자여야 합니다.

---

예시

const TestComponent = ()=>{
	return <FirestComponent>lightgray색 배경에 blue색 글씨가 적히는 div입니다.</FirstComponent>
}

const FirstComponent = styled.div`
    background-color:lightgray;
    color:blue;
`

---

심화

위의 경우 background-color, color 등등 스타일을 지정하면 코드를 수정하지 않는 이상 적용한 스타일을 변경할 수 없습니다. 하지만 React에서 사용하는 props를 이용하면 스타일의 값을 변수로 받는다면 설정창에서 변수의 내용을 바꾸어 색을 설정할 수 있도록 만들 수 있습니다.

const TestComponent = ()=>{
	const [backgroundColor,setbackgroundColor] = useState("#ff00c8")
	return <FirestComponent changeColor={backgroundColor}>backgroundColor색 배경에 blue색 글씨가 적히는 div입니다.</FirstComponent>
}

const FirstComponent = styled.div`
    background-color:${(props)=>props.backgroundColor}
    color:blue;
`