[React] 리액트를 활용하는 방법

1. 왜 리액트를 사용할까?

리액트는 전 세계적으로 가장 많이 사용되는 프론트엔드 라이브러리 중 하나다. 그렇다면 왜 리액트를 사용할까? 그리고 다른 프레임워크와 비교했을 때 어떤 차이점이 있을까?

리액트 vs 다른 프레임워크 비교

비교	React	Vue	Angular	Svelte
러닝 커브	중간	낮음	높음	낮음
상태 관리	Context API, Redux, Zustand	Vuex, Pinia	RxJS, NgRx	Store API
성능	빠름	빠름	무겁지만 확장성 좋음	가장 빠름
커뮤니티	매우 큼	큼	큼	작음
기업 사용	Facebook, Netflix, Airbnb	Alibaba, Xiaomi	Google, Microsoft	Relatively small

 

리액트는 컴포넌트 기반 구조로 유지보수가 쉽고, 커뮤니티가 크며, 다양한 라이브러리를 통해 확장성이 뛰어나다는 장점이 있다.

---

2. 리액트의 핵심 개념

리액트의 개념을 어떻게 활용하는지 예제와 함께 살펴보자.

컴포넌트 기반 개발이란?

컴포넌트 기반 개발은 UI를 독립적인 블록(컴포넌트)으로 나누어 관리하는 방식이다.

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

이러한 방식은 재사용성을 극대화하고 유지보수를 쉽게 만든다.

상태(state) 관리 예제

간단한 상태 관리는 useState로, 글로벌 상태 관리는 Context API 또는 Redux를 사용한다.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default Counter;

---

3. 이렇게 쓰자!

API 데이터 처리

일반적으로 fetch보다는 axios 또는 SWR, React Query를 사용한다.

import useSWR from 'swr';
import axios from 'axios';

const fetcher = (url) => axios.get(url).then(res => res.data);

const UserList = () => {
  const { data, error } = useSWR('/api/users', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

컴포넌트 설계 패턴

• Container-Presentational 패턴: 데이터 처리와 UI를 분리
• Atomic Design 패턴: UI를 최소 단위(Atom)에서 점점 확장

---

4. 리액트와 함께 쓰면 좋은 라이브러리

UI 라이브러리

• Material UI (MUI): 기업에서 많이 사용, 디자인 일관성 유지
• Tailwind CSS: 유틸리티 기반 스타일링, 커스텀 가능
• Chakra UI: 스타일과 기능의 균형

상태 관리 라이브러리

• Redux Toolkit: 대규모 프로젝트에 적합
• Zustand: 간단하고 가벼운 상태 관리
• Recoil: React 공식 상태 관리 후보

데이터 패칭 라이브러리

• SWR vs React Query: React Query가 기능이 많지만 SWR이 가볍다.

---

5. 역할 기반 사용자 관리 시스템 예제

import { useState } from 'react';

const users = [
  { id: 1, name: '관리자', role: 'admin' },
  { id: 2, name: '팀원 A', role: 'user' },
  { id: 3, name: '팀원 B', role: 'user' }
];

const RoleManager = () => {
  const [userList, setUserList] = useState(users);

  const changeRole = (id) => {
    setUserList(prev =>
      prev.map(user =>
        user.id === id ? { ...user, role: user.role === 'admin' ? 'user' : 'admin' } : user
      )
    );
  };

  return (
    <div>
      <h2>사용자 목록</h2>
      <ul>
        {userList.map(user => (
          <li key={user.id}>
            {user.name} - {user.role} 
            <button onClick={() => changeRole(user.id)}>역할 변경</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RoleManager;