Styled Components란? (Css-in-Js, GlobalStyles)

Styled Components란? 

React에서 CSS-in-JS방식으로 컴포넌트를 꾸미게 해주는 패키지 이다.

 

✔️ CSS-in-Js 방식 : 자바스크립트를 이용해서 CSS 코드를 만들어내는 방식

 

기존에는 컴포넌트를 꾸밀때 CSS 파일을 따로 만들어서 꾸며주었다면 styled components를 사용하면 css 파일을 따로 생성할 필요없이 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸밀 수 있다. 

 

자바스크립트 방식으로 CSS를 작성하면 조건부 스타일링이 가능하다는 장점이 있다.

props를 통해서 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달받아서 조건부 스타일링이 가능하다. 그렇다면 컴포넌트 양식을 재사용하더라도 props를 통해 원하는 설정으로 각각 다르게 적용할 수 있다. 

 

Styled Components 설치 방식 

//npm
npm install --save styled-components

//yarn
yarn add styled-components

 

Styled Components 사용 방식 

1. 먼저 styled객체를 사용해서 스타일을 정의한다.
2. 그 후 ``사이에 스타일을 정의하고
3. 정의된 Styled Components를 React 컴포넌트에서 사용한다.  

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => props.backgroundColor};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
`;

const MyButton = () => {
  return (
    <>
      <Button backgroundColor="red">Click me!</Button>
      <Button backgroundColor="blue">Click me!</Button>
    </>
  );
};

export default MyButton;

 

Props 활용

${(props) => props.backgroundColor}를 사용하여 backgroundColor이라는 props를 받아와서 버튼의 배경색으로 사용한다. 

버튼의 배경색은 backgroundColor props의 값에 따라 동적으로 결정할 수 있다. 

 

---

전역스타일(GlobalStyles)이란?

 

전역스타일은 모든 요소에 적용되는 스타일이다. 즉 모든 컴포넌트에 적용되는 스타일이다. 일반적으로 전체적인 레이이웃이나 폰트, 컬러 등과 같은 요소들을 전역적으로 사용될때 사용된다. 

 

규모가 큰 프로젝트의 경우  공통적으로 적용해야하는 스타일을 일일이 적용하는 것은 비효율적으로 공통된 부분을 빼줄 필요가 있고 이를 전역스타일로 구현한다. 

 

➕ 브라우저마다 기본적으로 제공되는 스타일(default style)이 있다. CSS RESET를 통해서 default style을 초기화시키고 내가 원하는대로 스타일을 정의할 수 있다. 

 

GlobalStyles 적용 방식 

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-family:  "Helvetica", "Arial", sans-serif;
  }
`;

const App = () => {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 애플리케이션 컴포넌트들 */}
    </>
  );
};

export default App;

 

 

1. 전역 스타일을 정의하고(GlobalStyle)

2. 최상위 앱 컴포넌트에 적용하여 해당 스타일이 앱의 모든 컴포넌트에 적용되게 한다.