[TIL] 23.05.03

Minkyu Shin·2023년 5월 4일

React TIL 코드잇 FE 부트캠프 0기

TIL

목록 보기

21/44

오늘의 나는 무엇을 배웠을까?

Styled Components

1. Styled Components란?

React에서 컴포넌트를 만들며 바로 해당 컴포넌트의 스타일을 작성하여 적용할 수 있도록 해주는 라이브러리이다.
기존 리액트에서는 JSX 문법으로 태그를 작성해 컴포넌트를 만들고, 해당 태그를 타겟팅 한 CSS 코드를 따로 작성해 줘야 했다. Styled Components라는 라이브러리는 CSS in JS, 즉 JS 안에서 CSS를 작성하도록 해준다.
아래 코드 예시를 살펴 보면 기존 CSS를 적용하던 방법과 다름을 알 수 있다.

import styled from "styled-components";

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #fff;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

기존 리액트 프로젝트에서 CSS를 사용할 때는 다음과 같은 문제가 발생했다.
클래스 이름은 전역적인 특성(한 컴포넌트에서 사용한 클래스 이름을 다른 모든 컴포넌트에서 사용 가능)을 가진다. 따라서 서로 다른 컴포넌트에서 클래스 이름이 중복되면 해당 컴포넌트에서 import 해오지 않은 CSS 파일의 스타일이 적용될 위험이 있다. 이에, 클래스 이름을 중복되지 않게 짓도록 주의해야 하는 번거로움이 있다.
또, 재사용하는 CSS 코드 관리에 어려움이 있다. 특정 CSS 파일에 작성된 스타일이 어디에서 사용되는 스타일인지 알기 어렵기 때문이다.

2. 컴포넌트 만들기

Styled Components에서는 다음과 같이 태그 함수를 활용하여 컴포넌트를 만든다.

const Component_name = styled.tagname`
	//스타일
`;

styled.tagname 의 tagname 부분에는 스타일을 적용할 HTML 태그 이름을 작성하면 된다.
생성된 컴포넌트를 사용하기 위해서는 일반적인 리액트 컴포넌트와 동일하게

<Component_name></Component_name>

과 같이 사용하면 된다.

3. Nesting 문법

Nesting 이란 CSS 규칙 안에서 CSS 규칙을 만드는 것을 말한다. 이를 활용하는 방법은 & 선택자와 컴포넌트 선택자를 활용하는 것이 있다.

& 선택자

& 선택자는 부모 선택자를 의미한다. & 선택자를 사용하면 해당 컴포넌트를 재참조할 수 있다.
가령, 아래와 같은 코드가 있을 때

const Button = styled.button`
  background-color: ~;
  //

  &:hover {
	background-color: ~;
  }
`

버튼 컴포넌트의 클래스를 뜻하게 된다.

컴포넌트 선택자

Styled Components에서는 클래스 이름을 쓰지 않기 때문에 컴포넌트 안에 있는 또 다른 컴포넌트를 선택하고 싶을 때 다른 방법을 사용해야 한다. 이때 사용하는 것이 컴포넌트 선택자인데, ${Component} 와 같이 컴포넌트 자체를 템플릿 리터럴 내에 넣어주면 된다.
그럼, 어떤 컴포넌트 내의 자손 컴포넌트를 스타일링 해줄 수 있다.
& 와 자손 결합자를 함께 사용해 주는 경우 & 를 생략해 줄 수 있다.

4. 글로벌 스타일 컴포넌트

CSS 스타일 중 모든 컴포넌트에 적용하고 싶은 것이 있을 수 있다. 이 때 글로벌 스타일 컴포넌트를 활용하면 된다. 글로벌 스타일 컴포넌트를 최상위 컴포넌트에서 렌더링 하면 하위 컴포넌트에 항상 스타일이 적용된다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
* {
  box-sizing: border-box;
}

///
`

createGlobalStyle 함수를 통해 글로벌 스타일 컴포넌트를 생성할 수 있다. 이 때 다른 styled-components 함수와 마찬가지로 템플릿 리터럴을 통해 스타일 코드를 작성해 주면 된다.
글로벌 스타일 컴포넌트는 내부적으로 처리되어 HTML의 <head> 부분의 <style> 태그로 들어가게 된다.

5. 애니메이션 사용하기

CSS 에서는 @keyframes 로 키프레임 애니메이션을 선언하고 animation 속성에서 이름으로 사용한다.
Styled-components에서는 keyframes 함수를 사용하여 키프레임 애니메이션을 선언한다. 이 때 styled 함수와 마찬가지로 템플릿 리터럴로 사용하면 된다. 그렇게 선언한 키프레임 애니메이션을 ${keyframeAnimation} 과 같이 템플릿 리터럴에 삽입하면 된다.

import styled, { keyframes } from "styled-components";

const keyFrameEx = keyframes`
50% {
  opacity: 0.2;
}
`

const container = styled.div`
width: 100px;
height: 100px;
animation: ${keyFrameEx} 2s ease-in-out infinite; // ${} 사용
`

keyframes 함수가 반환하는 변수는 JS 객체이다. 따라서 반드시 styled 또는 css 함수를 통해 사용해야 한다.

6. 테마 기능 만들기

테마라 함은 사용자가 보는 화면의 색상, 글자 크기와 색 등을 모아 놓은 것을 말한다. Styled Components를 활용하여 테마를 쉽게 만들 수 있는데 그 방법은 다음과 같다.

ThemeProvider

테마 기능을 구현하기 위해서는 현재 테마로 설정된 값을 사이트 전체에서 참조할 수 있어야 한다. 리액트에는 Context 라는 개념이 있는데, 이는 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능이다. Styled components에서도 이 context를 기반으로 테마를 사용할 수 있다. 이 때 context를 내려주는 컴포넌트가 바로 ThemeProvider 이다.

import { ThemeProvider } from "styled-components";
import Button from "./Button";

const App = () => {
  const theme = {
    primaryColor: "#1da1f2",
  };
  
  return (
    <ThemeProvider theme={theme}>
      <Button>확인</Button>
    </ThemeProvider>
  );
}

export default App;

위 코드 예시처럼 ThemeProvider 컴포넌트를 통해 theme 객체를 내려주면 해당 컴포넌트 하위의 Styled Components로 만든 컴포넌트에서는 theme 객체를 사용할 수 있다. 마치 props를 내려준 것처럼 동작하게 되는 것이다.

가령 Button 컴포넌트에서 theme 객체를 활용하는 예시를 보면

import styled from "styled-components";

const Button = styled.button`
background-color: ${({theme}) => theme.primaryColor};
`;

와 같이 함수를 삽입하여 테마 객체의 값을 사용할 수 있다.
만약 여러 테마 중에서 선택하여 사용하게 하고 싶다면 useState 를 활용하여 테마를 바꿔가며 사용할 수도 있다. 또, 테마 값을 일반적인 컴포넌트에서 참조하고 싶다면 useContext 를 사용하여 ThemeContext 를 불러오자.

import { useContext } from "react";
import { ThemeContext } from "styled-components";

const SettingPage = () => {
  const theme = useContext(ThemeContext);
}