24. Emotion으로 배우는 CSS-in-JS 스타일링: React 프로젝트의 효율적인 디자인 관리

"Emotion으로 배우는 CSS-in-JS 스타일링: React 프로젝트의 효율적인 디자인 관리"

---

1시간 분량 강의안 (Emotion 기초)

강의 목표

1. Emotion 라이브러리의 개념과 CSS-in-JS 방식의 장점을 이해한다.
2. Emotion을 활용하여 React 프로젝트에 스타일링을 적용하는 방법을 학습한다.
3. Emotion의 고급 기능(동적 스타일링, 테마, 애니메이션)을 익힌다.

---

강의 목차

---

1. Emotion이란 무엇인가? (10분)

Emotion의 정의

• Emotion은 CSS-in-JS 방식의 강력한 스타일링 라이브러리로, JavaScript 코드 내에서 스타일을 작성하고 컴포넌트별로 적용할 수 있습니다.

Emotion의 주요 특징

1. CSS와 JavaScript의 통합: 스타일과 로직을 한 파일에 작성 가능.
2. 동적 스타일링 지원: props와 상태에 따라 스타일 변경.
3. 높은 성능: 스타일이 필요한 시점에만 동적으로 생성 및 적용.
4. 다양한 스타일링 방식 지원: css 함수, styled API, 객체 스타일링 등.

---

2. Emotion 설치 및 기본 설정 (10분)

1단계: 설치

npm install @emotion/react @emotion/styled

2단계: 기본 사용법

1. css 함수를 사용한 스타일 적용:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

function App() {
  return <button css={buttonStyle}>Click Me</button>;
}

export default App;

1. styled API를 사용한 스타일 적용:

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

function App() {
  return <Button>Click Me</Button>;
}

export default App;

---

3. Emotion의 동적 스타일링 (20분)

1단계: props 기반 스타일링

• styled API에서 props를 사용해 동적으로 스타일 변경:

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

2단계: 객체 스타일링

• css 함수에서 객체 형태로 스타일 정의:

const buttonStyle = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
};

function App() {
  return <button css={buttonStyle}>Click Me</button>;
}

---

4. Emotion의 고급 기능 (15분)

1단계: 글로벌 스타일

• Global 컴포넌트를 사용해 전역 스타일 정의:

import { Global, css } from '@emotion/react';

const globalStyle = css`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
`;

function App() {
  return (
    <>
      <Global styles={globalStyle} />
      <h1>Emotion</h1>
    </>
  );
}

export default App;

2단계: 테마 기반 스타일링

• ThemeProvider를 사용해 테마 적용:

import { ThemeProvider } from '@emotion/react';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

const Button = styled.button`
  background-color: ${(props) => props.theme.primary};
  color: white;
  padding: 10px 20px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Styled Button</Button>
    </ThemeProvider>
  );
}

export default App;

3단계: 애니메이션

• keyframes를 사용해 애니메이션 적용:

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const AnimatedDiv = styled.div`
  animation: ${fadeIn} 2s ease-in-out;
`;

function App() {
  return <AnimatedDiv>Fading In</AnimatedDiv>;
}

---

5. 실습 과제 (10분)

실습 과제

1. Emotion을 사용해 Card 컴포넌트를 생성하고 제목과 내용을 스타일링하세요.
2. props를 활용해 primary 및 secondary 버튼 스타일을 동적으로 변경하세요.
3. 테마를 정의하여 색상 및 글꼴 스타일을 중앙에서 관리하세요.

---

6. Q&A 및 정리 (5분)

• Q&A:
  1. Emotion과 Styled Components의 차이점은 무엇인가요?
  2. Emotion은 대규모 프로젝트에서 어떻게 사용될 수 있나요?
• 요약:
  • Emotion은 CSS와 JavaScript를 통합하여 강력한 스타일링 도구를 제공합니다.
  • css 함수, styled API, 글로벌 스타일 및 테마 등 다양한 기능을 활용해 스타일을 관리할 수 있습니다.
  • 동적 스타일링과 성능 최적화에 강점을 가지며, React 프로젝트에 적합한 CSS-in-JS 솔루션입니다.