리액트 컴포넌트의 기본 개념 완전 정복하기

여러분, 리액트 입문하려고 검색하다가
"컴포넌트"라는 단어에 자꾸 막히신 적 있지 않으셨나요?
도대체 그게 뭐길래 이렇게 중요할까요?

https://inf.run/mg1G5

안녕하세요,

이번 글에서는 리액트의 핵심 개념 중 하나인 컴포넌트(Component)에 대해 아주 쉽게, 그리고 직관적으로 설명해 드릴 거예요.
함수형 vs 클래스형? Props와 State는 또 뭔데? 이런 의문들, 여기서 전부 해결해 드릴게요!

지금부터 저와 함께 찬찬히, 하나씩 배워봅시다. 😄

1. 컴포넌트란 무엇인가요? 🤔

리액트에서 컴포넌트(Component)는 웹 페이지를 이루는 가장 작은 단위입니다.
우리가 눈으로 보는 버튼, 텍스트, 이미지, 카드 같은 것들이 바로 이 컴포넌트들로 구성돼 있어요.

정확히 말하면, 하나의 UI 요소를 독립적인 모듈로 나누어 관리할 수 있게 해주는 것이 바로 컴포넌트입니다.

🧠 왜 컴포넌트가 중요할까요?

• 재사용성 향상:
• 한 번 만든 컴포넌트를 다른 곳에서도 재사용할 수 있어요.
• 유지보수가 쉬워짐:
• 각 컴포넌트는 독립적으로 동작하므로 수정이 편리해요.
• 테스트 용이:
• 독립적인 단위라서 테스트 작성도 수월하답니다.

컴포넌트 예시: 쇼핑몰의 상품 카드

예를 들어 볼까요?

쇼핑몰 사이트를 떠올려보세요. 상품 리스트 화면에는 여러 개의 카드가 나열되어 있을 거예요.
각 카드에는 상품명, 이미지, 가격, 찜 버튼 같은 것들이 들어 있죠. 이걸 하나의 컴포넌트로 만들 수 있어요!

이렇게 하나의 UI 단위를 컴포넌트로 만들어 놓으면, 이후에 다른 페이지나 서비스에서도 복붙처럼 재활용할 수 있어서 정말 유용해요!

📋 컴포넌트란 이런 것!

여기까지가 리액트 컴포넌트의 정체에 대한 기본 설명이었어요!

다음 챕터에서는 실전 코드 예제를 통해 컴포넌트를 직접 만들어보며 더 깊이 이해해 볼게요. 😊

2. 함수형 컴포넌트 실전 예제 🧩

리액트에서 가장 많이 쓰이는 컴포넌트 형태는 바로 함수형 컴포넌트입니다.
ES6 이후 등장했고, 특히 React Hooks가 추가되면서 완전 대세로 자리잡았죠!

🧪 간단한 상품 카드 예제

한 번 코드를 같이 볼까요?

아래는 상품명을 보여주고 좋아요(Like) 버튼이 있는 간단한 컴포넌트입니다.

import React, { useState } from 'react';

function ProductCard({ name, price }) {
  const [liked, setLiked] = useState(false);

  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
      <button onClick={() => setLiked(!liked)}>
        {liked ? 'Unlike' : 'Like'}
      </button>
    </div>
  );
}

export default ProductCard;

🧠 코드 해석

• useState를 통해 liked라는 상태값을 생성
• 버튼 클릭 시 setLiked를 호출하여 상태를 반전시킴
• 상태가 바뀌면 리렌더링되어 'Like' 또는 'Unlike'가 즉시 반영됨

정말 신기하지 않나요? 단 몇 줄의 코드만으로 사용자 반응에 따라 UI가 바뀌다니...
이게 바로 리액트 함수형 컴포넌트의 매력이에요!

📌 함수형 컴포넌트 특징 정리

이제 함수형 컴포넌트가 어떤 식으로 동작하는지 감이 좀 오셨죠? 😄

다음 단계에서는 클래스형 컴포넌트와 비교해 보면서 차이를 더 분명하게 알아볼 거예요.

3. 클래스형 컴포넌트도 아직 유효할까요? 🏛

요즘 리액트 개발자들 사이에선 함수형 컴포넌트가 대세지만, 클래스형 컴포넌트도 여전히 존재합니다.
특히 옛날 코드나 레거시 프로젝트를 다룰 땐 꼭 알아둬야 해요.

React 16.8 이전까지는 클래스형 컴포넌트가 기본이었거든요.

📦 클래스형 컴포넌트 예제

아까 함수형으로 만들었던 ProductCard를 이번엔 클래스 기반으로 다시 만들어볼게요.

import { Component } from 'react';

class ProductCard extends Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  toggleLike = () => {
    this.setState({ liked: !this.state.liked });
  };

  render() {
    return (
      <div>
        <h3>{this.props.name}</h3>
        <p>Price: ${this.props.price}</p>
        <button onClick={this.toggleLike}>
          {this.state.liked ? 'Unlike' : 'Like'}
        </button>
      </div>
    );
  }
}

export default ProductCard;

🧠 클래스형 방식 요점 정리

• constructor()에서 상태 this.state 초기화
• 이벤트 핸들러는 보통 화살표 함수(=>)로 바인딩 처리
• UI 출력은 render() 메서드 안에서 처리

🆚 함수형 vs 클래스형 비교

정리하자면,

클래스형 컴포넌트는 여전히 중요하지만,

현재 실무에서는 함수형이 거의 대부분이니 초보자분들은 함수형 중심으로 익히는 게 좋아요!

4. JSX와 컴포넌트 구조 🧬

리액트 컴포넌트를 제대로 이해하려면, JSX 문법과 컴포넌트의 구조에 대한 이해는 필수예요.

JSX는 JavaScript 내부에서 HTML을 작성할 수 있게 도와주는 리액트 전용 문법이에요.

🔤 JSX란?

JSX는 JavaScript XML의 줄임말로, XML(HTML)과 비슷한 문법을 JavaScript 코드 안에 바로 작성할 수 있게 해줘요.

function WelcomeMessage() {
  return <h1>Welcome to My Website!</h1>;
}

이처럼 JSX는 HTML처럼 생겼지만, 실제론 JavaScript 코드라는 점!

그래서 문법적으로도 JS 규칙을 따라야 해요.

예를 들어 class는 className으로 써야 하죠.

🔗 Props로 데이터 전달하기

컴포넌트끼리 데이터를 전달할 땐 Props(속성)를 사용합니다.

부모 컴포넌트가 자식 컴포넌트에 값을 전달하는 역할이죠!

// 부모 컴포넌트
function App() {
  return <ProductCard name="Laptop" price={999} />;
}

// 자식 컴포넌트
function ProductCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>Price: ${props.price}</p>
    </div>
  );
}

여기서 중요한 점은 Props는 읽기 전용이라는 거예요. 컴포넌트 안에서 직접 수정할 수는 없어요.

📈 State로 동적인 값 관리하기

Props는 부모 → 자식으로 전달하는 고정값이라면, State는 컴포넌트 자체에서 변화하는 값이에요.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

이 컴포넌트는 클릭할 때마다 상태(count)가 변하면서 UI가 즉각 반응해요.
이게 바로 리액트의 진짜 매력이죠!

📌 JSX & 컴포넌트 구조 요약

여기까지가 JSX와 컴포넌트의 기본 구조였어요! 이제 마지막으로 React Hooks를 활용해 라이프사이클까지 정리해 볼게요. 💫

6. React Hooks로 라이프사이클 관리하기 🔁

React에서 컴포넌트는 생성 → 업데이트 → 소멸이라는 생명주기(Lifecycle)를 갖습니다.

클래스형 컴포넌트에서는 이 생명주기를

componentDidMount, componentDidUpdate, componentWillUnmount 등 메서드로 관리했는데요.

함수형 컴포넌트에서는 useEffect라는 Hook 하나로 라이프사이클을 모두 컨트롤할 수 있어요!

⏱ 라이프사이클이란?

• Mount: 컴포넌트가 처음 렌더링될 때
• Update: 상태나 Props가 바뀌어 다시 렌더링될 때
• Unmount: 컴포넌트가 화면에서 사라질 때

💡 useEffect 기본 사용법

import { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 언마운트 시 정리
  }, []);

  return <p>경과 시간: {time}초</p>;
}

위 예제에서는 setInterval을 이용해서 1초마다 time을 증가시키고 있고요.
return 안의 함수는 컴포넌트가 사라질 때 실행돼서 타이머를 정리해줍니다.

이걸 정리(clean-up) 함수라고 불러요!

🧭 useEffect 두 번째 인자

이렇게 useEffect는 조건에 따라 다양한 방식으로 리액트 생명주기를 제어할 수 있어서 정말 유용해요!

✅ 정리: 리액트 훅과 라이프사이클

• 함수형 컴포넌트의 생명주기 처리는 useEffect 하나로 가능!
• useEffect(fn, [])은 컴포넌트 마운트 시 한 번만 실행됨
• return 문 안에 정리(clean-up) 코드를 작성해 언마운트 처리

이제 여러분은 컴포넌트의 생성과 파괴까지 제어할 수 있는 리액트 고수가 되어가고 있어요! 👏

다음은 마지막으로 전체 내용을 요약하며 마무리해볼게요.

🎯 컴포넌트 개념, 이제 어렵지 않죠?

여기까지 따라오신 여러분, 정말 대단하세요! 👏

처음엔 조금 낯설고 어렵게 느껴졌을지 몰라도, 지금쯤이면 리액트 컴포넌트의 구조와 사용법이 꽤 익숙해졌을 거예요.

다시 한번 핵심만 정리해볼게요.

• 컴포넌트는 UI의 최소 단위이며, 재사용성과 유지보수성을 높여줍니다.
• 함수형 컴포넌트가 요즘 대세이며, Hooks를 통해 상태와 생명주기를 제어할 수 있어요.
• Props는 외부에서 받는 값, State는 내부에서 변화하는 값이에요.
• JSX 문법을 통해 JavaScript 안에서 HTML처럼 코드를 작성할 수 있어요.

이제 여러분은 리액트 컴포넌트를 제대로 이해한 거예요!

다음 단계로 넘어가기 전에, 간단한 프로젝트나 미니 앱을 직접 만들어보면서 복습해보는 걸 추천드려요.

실습이 최고의 선생님입니다! 😉

styled-components로 리액트 스타일링하기
: CSS-in-JS의 모든 것

여러분!
리액트 개발하면서 스타일 때문에 머리 아파본 적 있으신가요?
특히 CSS 충돌 문제… 정말 스트레스죠!

https://inf.run/mg1G5

안녕하세요, 여러분! 😄
오늘은 React에서 스타일을 보다 효율적으로 관리할 수 있는 방법, 바로 styled-components에 대해 이야기해보려 해요.

웹 개발 환경이 점점 복잡해지고, CSS 관리가 머리 아픈 일이 되어버렸죠.

특히 리액트처럼 컴포넌트 기반으로 구조화된 프로젝트에서는 스타일의 지역화, 재사용성, 조건부 적용 같은 요소들이 점점 중요해지고 있습니다.

기존의 전역 스타일 방식은 충돌과 유지보수에 취약했고, 이를 해결하기 위해 등장한 것이 CSS-in-JS라는 패러다임입니다.

이 방식 중 대표적인 도구가 바로 styled-components죠.

이번 포스팅에서는 styled-components가 무엇인지, 어떻게 쓰는지, 그리고 진짜 현장에서 어떻게 활용하면 좋은지 실전 예제 중심으로 알아보겠습니다!

1. CSS-in-JS란 무엇인가?

CSS-in-JS는 말 그대로 CSS를 JavaScript 안에서 작성하는 스타일링 기법을 말합니다.

즉, 스타일을 별도의 CSS 파일로 분리하지 않고 JS 파일 내에서 함께 작성함으로써, 스타일과 컴포넌트의 결합도를 높이는 것이죠.

📌 CSS-in-JS의 주요 특징

• 스타일과 컴포넌트를 함께 관리하므로 유지보수가 쉬움
• 동적 스타일링이 가능 – props, 상태값 등을 활용하여 실시간으로 스타일 변경
• CSS 클래스 이름 충돌 없음 – 고유 클래스명이 자동 생성됨

예전에는 CSS 파일이 점점 커지면서 어떤 클래스가 어디에 영향을 주는지 파악하기 힘들었죠.

그래서 스타일 충돌이 자주 발생했고, 컴포넌트 단위의 분리된 스타일 관리가 절실해졌습니다.

바로 이 문제를 해결한 게 CSS-in-JS입니다.

리액트 같은 컴포넌트 기반 개발 환경에 딱 맞는 스타일링 방식이죠!

💡정리하자면,

CSS-in-JS는 단순한 문법 변화가 아니라 UI 개발 방식의 패러다임 변화라고 볼 수 있어요.

개발자와 디자이너 모두에게 더 나은 협업 경험을 제공하는 스타일링 전략이죠.

2. styled-components 소개 및 사용법

styled-components는 CSS-in-JS 패러다임을 대표하는 라이브러리 중 하나로,

컴포넌트 기반 스타일링을 가장 직관적이고 효율적으로 구현할 수 있게 해줍니다.

이 라이브러리를 사용하면 JS 안에서 템플릿 리터럴(``)로 CSS 코드를 작성하고, 이를 실제 리액트 컴포넌트로 변환할 수 있어요.

🚀 styled-components의 장점

• 컴포넌트 단위로 스타일 캡슐화되어 전역 스타일 충돌 걱정 없음
• props 기반의 동적 스타일링이 매우 자연스럽고 강력함
• 재사용 가능한 스타일 컴포넌트 작성 가능 – 코드 일관성 ↑

🧪 사용 예제

import styled from 'styled-components';

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

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

const App = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Default Button</Button>
  </div>
);

보시다시피 Button이라는 스타일 컴포넌트를 만들고, props(primary)에 따라 배경색을 다르게 적용하고 있어요.

:hover 같은 CSS 의사 클래스도 그대로 사용할 수 있어서 훨씬 직관적이고 가독성이 좋습니다.

💬 팁!

팀 단위 프로젝트에서는 버튼이나 카드 컴포넌트처럼 재사용 가능한 UI 요소를 styled-components로 만들어두면 코드 퀄리티와 생산성이 모두 올라갑니다!

3. props를 이용한 동적 스타일링

styled-components의 가장 큰 장점 중 하나는 props를 활용한 동적 스타일링입니다.

상태값이나 외부 데이터에 따라 스타일을 실시간으로 바꿀 수 있다는 뜻인데요,

조건부 렌더링보다 훨씬 더 직관적인 방식으로 스타일을 다룰 수 있어요.

🧪 예제: 상태값으로 색상 변경하기

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

const Title = styled.h1`
  font-size: 2rem;
  color: ${props => props.isActive ? 'green' : 'red'};
`;

const App = () => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <div>
      <Title isActive={isActive}>Styled Components!</Title>
      <button onClick={() => setIsActive(!isActive)}>
        Toggle
      </button>
    </div>
  );
};

이 코드를 실행하면 버튼 클릭 시마다 제목의 색상이 초록색 또는 빨간색으로 전환됩니다. 굳이 클래스 이름을 바꾸거나 별도 조건문 없이도 스타일을 깔끔하게 조절할 수 있다는 점에서 매우 유용하죠.

💡 이런 상황에 딱!

• 버튼 활성화 여부에 따라 색상 변경
• 상태 메시지에 따라 배경 또는 글자색 변경
• props로 테마 색상, 크기, 간격 등을 조정할 때

결론적으로, styled-components의 props 기능을 활용하면 스타일과 로직이 자연스럽게 결합된 깔끔한 코드를 만들 수 있어요. 유지보수도 편하고 확장성도 뛰어납니다!

4. 조건부 스타일링 비교: 전통 방식 vs styled-components

리액트에서는 조건부 스타일링을 여러 방식으로 구현할 수 있습니다.

대표적으로는 전통적인 CSS 클래스 방식과 styled-components 기반의 조건부 스타일링이 있는데요,

각각 어떤 차이가 있을까요?

🧾 전통적인 CSS 클래스 방식

일반적인 방법은 className을 조건에 따라 변경하고, 해당 클래스에 스타일을 정의하는 것입니다.

/* App.css */
.active {
  background-color: green;
}
.inactive {
  background-color: red;
}

// App.js
import './App.css';

const App = () => {
  const isActive = true;

  return (
    <div className={isActive ? 'active' : 'inactive'}>
      조건부 스타일 적용
    </div>
  );
};

단점: 클래스 이름을 신경 써야 하고, CSS 파일이 커질수록 관리가 복잡해져요.

🎨 styled-components 방식

같은 기능을 styled-components로 구현하면 이렇게 됩니다:

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

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${props => props.isActive ? 'green' : 'red'};
`;

const App = () => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <div>
      <Box isActive={isActive} />
      <button onClick={() => setIsActive(!isActive)}>Toggle Color</button>
    </div>
  );
};

장점: 스타일과 로직이 한눈에 보이며, 유지보수가 훨씬 편해집니다.

💡 정리하면?

5. 실무에서의 styled-components 활용 팁

styled-components는 단순한 스타일링 도구를 넘어,

디자인 시스템을 구성하거나 UI 컴포넌트를 효율적으로 관리할 수 있게 해주는 강력한 무기입니다.

아래에 실무에서 바로 적용할 수 있는 팁들을 정리해 보았어요!

🧰 styled-components 실전 팁

• 컴포넌트 네이밍 규칙 통일
• - 파일명, 컴포넌트명에 Styled 접두사 사용: StyledButton.js, StyledWrapper 등
• 테마 설정과 함께 사용하기
• - ThemeProvider를 활용하면 색상, 폰트, 여백 등을 일관되게 관리할 수 있어요.
• 조건부 스타일은 최소화
• - props를 너무 많이 주면 컴포넌트 복잡도가 올라가므로, 로직이 복잡해지기 전에 구조 분리 고려!
• 스타일 상속 활용
• - 공통 스타일을 만들고, styled(기존컴포넌트)로 쉽게 확장할 수 있어요.

💬 예시: ThemeProvider 사용

// theme.js
export const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
};

// App.js
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// StyledButton.js
const StyledButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
`;

ThemeProvider를 활용하면 전체 프로젝트에 일관된 디자인 토큰을 적용할 수 있어요.

디자인 시스템 만들 때도 정말 유용하답니다!

6. 마무리 🎯

지금까지 styled-components와 CSS-in-JS의 개념부터 사용법, 실전 활용 팁까지 함께 살펴보았습니다.

이 방식은 단순히 코드 스타일링 방법을 넘어서, 유지보수성과 확장성을 동시에 잡을 수 있는 진화된 스타일링 전략입니다.

특히 동적 스타일링, 조건부 렌더링, 컴포넌트 재사용이 중요한 프로젝트라면 styled-components를 적극 추천드려요.

디자인 시스템 구축 시에도 강력한 무기가 되어 줄 겁니다.

처음에는 다소 낯설게 느껴질 수 있지만, 직접 사용해 보면 그 강력함에 금방 익숙해지실 거예요.

더 깔끔한 코드, 더 유지보수하기 쉬운 구조를 원하신다면 지금 바로 도입해보세요!

💬 오늘의 핵심 정리
✔ styled-components는 CSS와 컴포넌트를 결합하는 강력한 도구
✔ props를 활용하면 조건부 및 동적 스타일링도 손쉽게 구현
✔ ThemeProvider로 확장성 높은 디자인 시스템 구축 가능
✔ 전통적인 방식과 비교해 유지보수와 재사용성에서 큰 강점

React에서 CSS 적용하기 : 3가지 방법과 활용법

여러분, 리액트 개발할 때 CSS 스타일링 어떻게 하세요?
막막하거나 헷갈릴 때 많지 않나요?

https://inf.run/mg1G5

안녕하세요, 여러분!

오늘은 리액트(React)로 웹앱을 만들면서 가장 자주 부딪히는 문제 중 하나,

바로 "어떻게 CSS를 적용할까?"에 대한 이야기를 해보려고 해요.

저도 처음 리액트를 접했을 때는 기존처럼 CSS 파일만 쓰면 되는 줄 알았는데, 시간이 갈수록 방법이 많아지더라구요.

그래서 오히려 뭐가 좋고 나쁜지 더 헷갈렸던 기억이 납니다. 😵

이번 글에서는 React에서 가장 널리 사용되는 3가지 CSS 적용 방식을 정리하고,

각각 어떤 상황에서 쓰면 좋은지 실전 코드 예제와 함께 소개해드릴게요.

마지막에는 장단점 비교표도 있으니 끝까지 봐주세요!

1. 일반 CSS 파일 사용하기

React에서 가장 기본적이고 직관적인 방식이죠.

전통적인 CSS 파일을 작성해서, 해당 파일을 컴포넌트에서 import해서 사용하는 방식입니다.

만약 기존 HTML/CSS로 작업해본 경험이 있다면 이 방식이 가장 익숙할 거예요.

📘 사용 방법 예제

아래는 styles.css 파일과 App.js 컴포넌트에서 적용한 예제입니다.

/* styles.css */
.container {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 10px;
}

.text {
  color: darkblue;
  font-size: 16px;
}

// App.js
import './styles.css';

function App() {
  return (
    <div className="container">
      <p className="text">Hello, React!</p>
    </div>
  );
}

export default App;

✅ 장점

• 익숙하고 간단하다 – 기존 HTML+CSS 경험이 있다면 바로 적용 가능
• 빠르게 스타일링 적용 가능해서 소규모 프로젝트에 적합

⚠️ 단점

• 클래스명이 전역(Global)이라서 컴포넌트 간 이름 충돌 발생 가능성 있음
• 규모가 커질수록 유지 관리가 어려워질 수 있음

💡 언제 사용하면 좋을까?

간단한 프로젝트나 초기 개발 프로토타입을 빠르게 만들 때 가장 효율적이에요.

기존 웹 페이지 구조를 React로 옮기는 작업에서도 유용하죠.

다만 팀 프로젝트나 규모가 커지는 경우엔 충돌 위험이 커질 수 있으니 조심하세요!

2. 인라인 스타일링 (Inline Style)

이번에는 인라인 스타일링입니다. HTML의 style 속성을 떠올리시면 되는데, React에서는 조금 다르게 JavaScript 객체 형태로 작성해야 해요. 특히 동적으로 스타일을 바꾸는 상황에서 자주 활용됩니다.

🧪 사용 방법 예제

import { useState } from 'react';

function App() {
  const [isActive, setIsActive] = useState(false);

  const style = {
    backgroundColor: isActive ? "lightcoral" : "lightblue",
    padding: "20px",
    borderRadius: "10px",
    color: isActive ? "white" : "darkblue",
    fontSize: "18px",
  };

  return (
    <div style={style}>
      <p>Hello, Dynamic React!</p>
      <button onClick={() => setIsActive(!isActive)}>Toggle Style</button>
    </div>
  );
}

export default App;

보이시죠?

상태값(isActive)에 따라 배경색이나 글자 색이 즉시 바뀌는 구조입니다.

이게 인라인 스타일링의 강점이에요.

✅ 장점

• 조건부 스타일 적용이 매우 간편함
• 컴포넌트에 스타일이 묶여 있어서 유지보수 쉬움

⚠️ 단점

• 스타일 재사용이 어렵다 – 다른 컴포넌트에서 동일한 스타일 쓰려면 복붙해야 함
• 코드가 지저분하고 복잡해질 수 있음 – 스타일이 JSX 안에 섞이기 때문에 가독성이 떨어질 수도 있음

💡 언제 사용하면 좋을까?

동적으로 상태가 바뀔 때마다 스타일을 조정해야 하는 경우, 인라인 스타일링은 최적의 선택이 될 수 있어요.

단순한 버튼 색상 변경이나 알림창처럼 UI 반응형 요소 구현 시 정말 유용하답니다.

3. CSS 모듈 (CSS Module)

이번엔 조금 더 고급스럽고 안전한 스타일링 방법인 CSS 모듈에 대해 알아볼게요.

CSS 파일을 컴포넌트 단위로 모듈화하여 클래스 이름 충돌을 원천 차단해 주는 방식입니다.

그래서 중대형 프로젝트에서 특히 많이 쓰이는 스타일링 방법이기도 해요.

🧩 사용 방법 예제

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// Button.js
import styles from './Button.module.css';

function Button() {
  return (
    <button className={styles.button}>Click Me</button>
  );
}

export default Button;

보시는 것처럼 className에 직접 문자열이 아닌 객체로 접근하는 게 포인트예요.

styles.button처럼요.

이 덕분에 컴포넌트마다 고유한 클래스명이 자동 생성돼서, 충돌 걱정 없이 안심하고 스타일링할 수 있습니다.

✅ 장점

• 클래스 이름이 자동으로 유니크해짐 – 충돌 걱정 NO!
• 유지보수 용이하고 모듈별로 스타일 관리 가능

⚠️ 단점

• 초심자에겐 약간의 진입 장벽이 있을 수 있음 (모듈 시스템 이해 필요)
• 모듈 경로 관리가 귀찮을 수 있음 – 파일 수 많아지면 번거로움

💡 언제 사용하면 좋을까?

프로젝트가 커지고, 컴포넌트 수가 많아질수록 CSS 모듈의 힘이 발휘됩니다.

클래스 네이밍 충돌이 잦아지고, 스타일 유지보수가 어려워질 때, CSS 모듈은 진짜 구세주처럼 느껴질 거예요.

팀 프로젝트에서는 사실상 필수입니다. 😉

4. 세 가지 방식 비교표

지금까지 소개한 일반 CSS 파일, 인라인 스타일링, CSS 모듈은 각각 고유한 특징이 있고, 용도에 따라 적절한 선택이 필요합니다. 한눈에 비교할 수 있도록 표로 정리해봤어요.

TIP 💬

단점이 있다고 해서 피할 필요는 없어요!

각 방식은 상황에 따라 정말 강력한 무기가 될 수 있습니다.

중요한 건 어떤 방식이 현재 프로젝트 상황과 개발 스타일에 가장 잘 맞느냐예요.

예를 들어,

간단한 개인 포트폴리오 사이트에는 일반 CSS 파일만으로도 충분할 수 있고, 상태 기반으로 UI가 자주 바뀌는 대화형 페이지라면 인라인 스타일이 딱이에요.

규모가 큰 협업 프로젝트라면 CSS 모듈은 거의 필수 수준이죠.

5. 상황별 추천 활용법 💡

세 가지 스타일링 방식 모두 장단점이 뚜렷하다 보니, 어떤 걸 써야 할지 고민이 될 수 있어요.

그래서 제가 직접 써보면서 얻은 실전 기준을 기준으로 상황별 추천 조합을 정리해봤어요.

🧠 이런 경우엔 이렇게 써보세요!

그리고 꼭 하나만 고집할 필요는 없어요!

혼합해서 사용하는 것도 좋은 전략입니다.

예를 들어

전역 테마는 일반 CSS 파일로, UI 컴포넌트는 CSS 모듈로, 버튼 hover 효과는 인라인 스타일로 처리하는 식으로요.

💬 한마디만 더!

실무에서는 정답보다 팀의 합의와 협업 스타일이 더 중요하더라구요.

각 방식의 특성과 상황을 이해하고, 유연하게 선택할 수 있다면 그게 진짜 ‘프로 개발자’ 아닐까요?

6. 마무리 🎁

React에서 스타일을 입히는 방법은 정말 다양합니다.

오늘 알아본 일반 CSS 파일, 인라인 스타일링, CSS 모듈은 그중에서도 가장 기본적이고 실무에서 자주 쓰이는 방식들이에요.

각 방식은 프로젝트의 성격, 팀 규모, 유지보수의 난이도 등에 따라 유불리가 분명하니, 이번 기회에 내 상황에 맞는 스타일링 전략을 세워보세요. 🧭

마지막 팁 💬

혼합해서 쓰는 것도 전략입니다!

특히 디자인 시스템을 갖춘 프로젝트라면, 공통 요소는 CSS 파일로, 개별 컴포넌트는 CSS 모듈로 관리하고, 일부 상호작용 요소는 인라인 스타일로 처리하면 정말 유용해요.

이제 CSS 때문에 머리 아프지 마세요.

React에서도 스타일링은 충분히 깔끔하고 체계적으로 관리할 수 있으니까요. 😊