Styled Components

Styled Components

---

• Styled Components는 React와 함께 사용하는 CSS in JS 라이브러리 중 하나입니다.
• JavaScript 파일 안에서 CSS를 작성하며 태그의 스타일 속성을 사용하지 않고 React 컴포넌트와 함께 컴포넌트 단위로 스타일을 관리할 수 있습니다.
• 때문에 CSS와 JavaScript를 분리하지 않아도 되므로, 유지보수성과 코드 가독성이 높아집니다.
• CSS 변수, 조건문, 반복문 등의 기능을 사용할 수 있어, 동적으로 스타일을 변경할 수 있고, 컴포넌트 스타일링을 위해 전용 문법을 사용합니다.
  
• 그러나 기존 CSS 파일을 사용하지 않으므로 초기 로딩 시간이 증가할 수 있으며, 브라우저 캐시 기능을 활용할 수 없습니다.

 

Styled Components 설치와 설정

---

npm install --save styled-components

• 터미널에서 위의 명령어를 입력하여 설치하고, 문제를 줄이기 위해 package.json에 아래 코드를 추가한다.

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

• 이후 js파일에 import를 한다.

import styled from "styled-components"

 

 

 

 

Styled Components 문법

---

• Styled Components는 먼저 컴포넌트를 선언하고, styled.태그` ` 를 할당한다.
• ``(백틱)안에 css의 속성과 값을 선언하면, 해당 컴포넌트는 선언한 css를 갖게 된다.

const BlueButton = styled.button` //BlueButton컴포넌트는 button이고, ``안의 css를 갖는다.
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <BlueButton>Blue Button</BlueButton>;
}

• 또한, 태그대신 컴포넌트를 ()안에 넣어서 css를 재활용할 수 있다.

const BlueButton = styled.button` //BlueButton컴포넌트는 button이고, ``안의 css를 갖는다.
  background-color: blue;
  color: white;
`;

const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}

 

 

Props 사용하기

---

• Styled Components에서 react처럼 props를 사용할 수 있습니다. 이때 ${}안에서 작성한다.  ${}안에서 js문법이 사용가능하기에 조건부로 렌더링 하는 것이 가능합니다.
• Styled Components에는 특이한 문법이 있는데, 그 중 &는 현재의 요소를 의미하며, hover등에서 사용가능하다.

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
   &:hover {
    background-color: ${(props) => props.primary ? 'navy' : 'gray'};
    color: white;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

 

• 추가로 전역스타일을 선언하는 것도 가능하다. 우선 아래의 createGlobalStyle를 import한다.

import { createGlobalStyle } from "styled-components";

 

• 그 후, 전역 스타일을 할당할 컴포넌트를 선언하고, 해당 컴포넌트를 최상위 컴포넌트에서 사용해 주면 전역에 스타일이 적용된다.

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}