React 컴포넌트 기반 설계와 상태 관리, 비동기 처리의 실제 사례

React 컴포넌트 기반 설계와 상태 관리, 비동기 처리의 실제 사례

React는 컴포넌트 기반 UI 라이브러리로, 재사용 가능한 컴포넌트를 설계하는 것이 핵심입니다. PL로서 팀원들에게 컴포넌트 설계 원칙을 교육하고, 효율적인 상태 관리와 비동기 처리를 위한 최적의 패턴을 제시하는 것이 매우 중요합니다. 이번 글에서는 사용자 목록 관리 애플리케이션을 예로 들어, React 프로젝트에서 컴포넌트 기반 설계, 상태 관리, 그리고 비동기 처리에 대해 설명하고 소스 코드까지 함께 제공하겠습니다.

React 컴포넌트 기반 설계와 상태 관리, 비동기 처리의 실제 사례

1. 프로젝트 개요

우리는 사용자 목록을 API에서 가져와 화면에 표시하고, 추가로 사용자를 등록할 수 있는 간단한 애플리케이션을 개발할 것입니다. 이 과정에서 컴포넌트 재사용성, 상태 관리와 비동기 처리의 원칙을 적용합니다.

src/
 ├── components/
 │    ├── UserList.js         # 사용자 목록을 렌더링하는 컴포넌트
 │    ├── AddUser.js          # 새로운 사용자를 추가하는 컴포넌트
 ├── context/
 │    └── UserContext.js      # 상태 관리를 위한 컨텍스트 파일
 ├── App.js                   # 메인 컴포넌트
 └── index.js                 # 엔트리 포인트

 

---

2. 컴포넌트 기반 설계

React는 컴포넌트 기반의 UI 라이브러리이므로, 우리는 각 기능을 개별 컴포넌트로 분리해 관리합니다. 이러한 컴포넌트 분리를 통해 재사용성을 높이고 유지보수성을 강화할 수 있습니다. 이 프로젝트에서는 다음과 같은 컴포넌트들이 사용됩니다:

• UserList: 사용자 목록을 렌더링하는 컴포넌트
• AddUser: 새로운 사용자를 추가하는 폼 컴포넌트

이 두 컴포넌트는 독립적으로 동작하며, 다양한 곳에서 재사용할 수 있는 형태로 설계됩니다.

코드 예시: UserList.js

import React, { useContext } from 'react';
import { UserContext } from '../context/UserContext';

const UserList = () => {
  const { users } = useContext(UserContext);

  return (
    <div>
      <h2>사용자 목록</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

코드 예시: AddUser.js

import React, { useContext, useState } from 'react';
import { UserContext } from '../context/UserContext';

const AddUser = () => {
  const { addUser } = useContext(UserContext);
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newUser = { id: Date.now(), name };
    addUser(newUser);
    setName(''); // 입력 필드 초기화
  };

  return (
    <div>
      <h2>새 사용자 추가</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="사용자 이름"
        />
        <button type="submit">추가</button>
      </form>
    </div>
  );
};

export default AddUser;

---

3. 상태 관리: Context API 사용

이번 프로젝트에서는 Context API를 사용하여 전역 상태를 관리합니다. UserContext라는 컨텍스트를 생성해 사용자 목록과 사용자 추가 기능을 중앙에서 관리합니다. 이렇게 전역 상태를 컨텍스트로 관리하면 컴포넌트 간 상태 공유가 매우 쉬워집니다.

코드 예시: UserContext.js

import React, { createContext, useState, useEffect } from 'react';

export const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    } catch (error) {
      console.error('Failed to fetch users:', error);
    }
  };

  const addUser = (newUser) => {
    setUsers([...users, newUser]);
  };

  useEffect(() => {
    fetchUsers(); // 초기 사용자 목록 로드
  }, []);

  return (
    <UserContext.Provider value={{ users, addUser }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserProvider;

export default AddUser;

 

Context API는 글로벌 상태를 간단하게 관리할 수 있게 해 주고, 컴포넌트가 서로 상태를 쉽게 공유할 수 있는 환경을 제공합니다.

---

4. 비동기 처리

사용자 목록을 API로부터 가져오기 위해서는 비동기 처리가 필요합니다. React에서는 useEffect와 async/await를 사용해 비동기 작업을 쉽게 처리할 수 있습니다. 이 패턴은 API 호출이 완료될 때까지 UI가 멈추지 않도록 보장하며, 데이터를 가져오는 동안에도 사용자가 애플리케이션을 원활하게 사용할 수 있게 합니다.

코드 예시: fetchUsers 비동기 함수

const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    setUsers(data);
  } catch (error) {
    console.error('Failed to fetch users:', error);
  }
};

이 방식은 가독성이 뛰어나고 유지보수가 용이한 비동기 처리를 가능하게 합니다. useEffect 훅을 통해 처음 컴포넌트가 렌더링될 때 API에서 데이터를 불러오고 상태를 업데이트하는 구조입니다.

---

5. 결론

React를 사용한 컴포넌트 기반 설계는 코드의 재사용성과 유지보수성을 극대화합니다. 또한 Context API를 활용한 전역 상태 관리와 비동기 처리는 복잡한 애플리케이션에서 효율적인 데이터 관리를 가능하게 합니다. 이번 예제에서는 사용자 목록 관리 애플리케이션을 통해 이러한 설계 원칙을 구체적으로 보여드렸습니다.

이 패턴은 실무에서 PL로서 팀원들에게 제시하고 가이드할 수 있는 최적의 패턴입니다. 다양한 프로젝트에서 이러한 구조를 활용하면 팀의 생산성과 코드의 품질을 크게 향상시킬 수 있습니다.