Styled Components

Styled Components

Styled Components 라이브러리

• CSS를 컴포넌트화 시켜 HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게해준다
• React 환경에서 사용 가능한 Styled Components 라는 라이브러리에 대해 알아보자.

Styled Components 설치

$ npm install --save styled-components

• 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여주려면 package.json 파일에 아래 코드를 추가

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

• 리액트에서 불러오기

import styled from "styled-components"

Styled Components 만들기

import styled from "styled-components"

// Styled 컴포넌트 생성
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

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

구조는 위와 같다.

위와 같은 컴포넌트를 재활용할 수 있다.

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

import styled from "styled-components"

// Styled 컴포넌트 생성
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

//위의 BlueButton을 재활용해서 새 컴포넌트 만들기
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

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

styled Component Props 활용하기

• Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.
• 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다

구조

const 컴포넌트이름 = styled.태그종류`
  CSS 속성 : ${(props)=> 함수코드}
`;

예시

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop에 따라 조건부 렌더링이 가능.
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

//받아온 prop 값을 그대로 이용해 렌더링
const Button2 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;

//받아온 prop 값을 그대로 이용해 렌더링
const Button3 = styled.button`
  background: ${(props) => props.color || "white"};
`;

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

전역 스타일 설정하기

1. 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다.
2. 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성
3. 이렇게 만들어진 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 컴포넌트의 스타일이 적용된다.

import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
  // 전역 스타일 설정부분
  `
function App() {
  return (
    <>
      <GlobalStyle />
      <App />
    </>
  );
}
  

• 전역 스타일에 reset CSS 를 담아두고 이를 통해 styled-components에 reset CSS를 통한 초기화 역할을 해줄 수도 있다.