23.Styled Components로 배우는 JavaScript 기반 스타일링: React 프로젝트의 스타일링 혁신

"Styled Components로 배우는 JavaScript 기반 스타일링: React 프로젝트의 스타일링 혁신"

---

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

강의 목표

1. Styled Components의 개념과 필요성을 이해한다.
2. JavaScript 기반으로 CSS를 작성하여 React 컴포넌트에 스타일을 적용하는 방법을 학습한다.
3. Styled Components의 고급 기능과 유용성을 체험한다.

---

강의 목차

---

1. Styled Components란 무엇인가? (10분)

Styled Components의 정의

• Styled Components는 CSS-in-JS 방식의 라이브러리로, JavaScript 코드 내에서 CSS를 작성하고 React 컴포넌트에 스타일을 적용할 수 있습니다.

Styled Components의 주요 특징

1. CSS와 JavaScript의 통합: 스타일과 로직을 한 파일에 작성.
2. 동적 스타일링: JavaScript 변수와 props를 활용해 스타일 동적으로 변경.
3. 자동 클래스 생성: 고유 클래스 이름 생성으로 스타일 충돌 방지.
4. 컴포넌트 중심 설계: 스타일이 컴포넌트에 직접 연결.

---

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

1단계: 설치

• Styled Components를 설치:

npm install styled-components

2단계: 기본 사용법

1. Styled Components로 버튼 스타일 정의:

import styled from 'styled-components';

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;

1. 출력 결과:

• Button은 Styled Components가 생성한 고유 클래스 이름을 사용하여 스타일이 적용됩니다.

---

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

1단계: props 기반 스타일링

• 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단계: 글로벌 스타일 정의

• createGlobalStyle을 사용해 전역 스타일 정의:

import { createGlobalStyle } from 'styled-components';

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

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Styled Components</h1>
    </>
  );
}

export default App;

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

• ThemeProvider를 사용해 테마 적용:

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'gray',
};

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

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

export default App;

---

4. Styled Components의 고급 기능 (15분)

1단계: 컴포넌트 확장

• 기존 Styled Component를 확장:

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'gray',
};

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

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

export default App;

2단계: 애니메이션 적용

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

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

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>;
}

3단계: 미디어 쿼리

• 반응형 디자인 구현:

const ResponsiveDiv = styled.div`
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  @media (max-width: 768px) {
    padding: 0 10px;
  }
`;

---

5. 실습 과제 (10분)

실습 과제

1. Styled Components로 Card 컴포넌트를 생성하고 제목과 내용을 스타일링하세요.
2. props를 사용해 배경색을 동적으로 변경하세요.
3. ThemeProvider를 활용해 버튼의 기본 색상을 테마로 설정하세요.

---

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

• Q&A:
  1. Styled Components를 CSS Modules와 비교했을 때 어떤 장점이 있나요?
  2. 대규모 프로젝트에서 Styled Components를 효과적으로 관리하려면 어떻게 해야 하나요?
• 요약:
  • Styled Components는 CSS와 JavaScript를 통합하여 컴포넌트 기반 스타일링을 제공합니다.
  • props, 테마, 애니메이션 등 동적 스타일링 기능이 풍부합니다.
  • CSS-in-JS의 강력한 도구로 React 프로젝트에서 스타일 충돌을 방지하고 유지보수성을 높입니다.