1. 복잡한 UI 상태 관리와 데이터 흐름

React는 복잡한 UI 상태 관리와 데이터 흐름 문제를 해결하기 위해 등장했습니다. 특히 단방향 데이터 흐름과 대규모 애플리케이션의 상태 관리에 초점을 맞추었습니다.

(1) What: 무엇을 해결했는가

React는 다음 두 가지 주요 문제를 해결했습니다:

• 복잡한 UI 상태의 일관성 유지
• 대규모 애플리케이션에서의 예측 가능한 데이터 흐름

(2) Why: 왜 해결이 필요했는가

기존의 UI 개발 방식은 다음과 같은 문제점이 있었습니다:

• 양방향 데이터 바인딩으로 인한 예측 불가능한 상태 변화
• 복잡한 컴포넌트 간 상태 공유 및 동기화 어려움
• 대규모 애플리케이션에서의 데이터 흐름 추적 어려움

(3) How: 어떻게 해결했는가

React는 다음과 같은 방식으로 이 문제를 해결했습니다:

• 단방향 데이터 흐름 도입
• 불변성(Immutability) 원칙 적용
• 컴포넌트 기반 아키텍처 채택
• 상태 끌어올리기(Lifting State Up) 패턴 도입

AS-IS (기존 방식)

Facebook의 채팅 기능을 예로 들어보겠습니다. 기존 방식에서는 여러 컴포넌트가 각자의 상태를 관리하고, 서로 복잡하게 얽혀 있었습니다.

// 채팅 목록 컴포넌트
function ChatList() {
  let chats = [];

  function updateChats(newChats) {
    chats = newChats;
    render();
  }

  function render() {
    // DOM 직접 조작
    document.getElementById('chat-list').innerHTML = chats.map(chat => `
      <div class="chat-item">
        <span>${chat.sender}</span>
        <span>${chat.message}</span>
        <span>${chat.timestamp}</span>
      </div>
    `).join('');
  }

  // 이벤트 리스너 등록
  document.getElementById('new-message-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const messageInput = document.getElementById('message-input');
    const newMessage = { sender: 'Me', message: messageInput.value, timestamp: new Date() };
    chats.push(newMessage);
    updateChats(chats);
    messageInput.value = '';
  });

  // 서버로부터 새 메시지 수신
  socket.on('new-message', function(message) {
    chats.push(message);
    updateChats(chats);
  });
}

// 사용자 목록 컴포넌트
function UserList() {
  let users = [];

  function updateUsers(newUsers) {
    users = newUsers;
    render();
  }

  function render() {
    document.getElementById('user-list').innerHTML = users.map(user => `
      <div class="user-item ${user.online ? 'online' : 'offline'}">
        ${user.name}
      </div>
    `).join('');
  }

  // 사용자 상태 변경 이벤트
  socket.on('user-status-change', function(updatedUser) {
    const userIndex = users.findIndex(u => u.id === updatedUser.id);
    if (userIndex !== -1) {
      users[userIndex] = updatedUser;
      updateUsers(users);
    }
  });
}

// 앱 초기화
function initApp() {
  ChatList();
  UserList();
}