React 채팅 UI 구현 완벽 가이드

실시간 채팅 애플리케이션의 UI를 React로 구현하는 방법을 다룹니다. Socket.io 연동부터 컴포넌트 설계, 상태 관리까지 실무에 바로 적용할 수 있는 내용을 담았습니다.

---

목차

1. React 프로젝트 설정
2. Socket.io-client 연동
3. 컴포넌트 구조 설계
4. 채팅방 목록 UI
5. 메시지 UI 컴포넌트
6. 입력창 및 전송 기능
7. 상태 관리 (Context/Redux)

---

1. React 프로젝트 설정

시작하며

여러분이 채팅 앱을 만들고 싶은데 어디서부터 시작해야 할지 막막했던 적 있나요? 처음에는 그냥 간단한 메시지 주고받기만 만들려고 했는데, 막상 시작하려니 프로젝트 구조부터 어떤 라이브러리를 설치해야 할지 고민되는 상황이 많습니다.

이런 문제는 실제 개발 현장에서도 자주 발생합니다. 잘못된 초기 설정은 나중에 기능을 추가하거나 확장할 때 큰 걸림돌이 됩니다.

특히 채팅처럼 실시간성이 중요한 애플리케이션은 처음부터 올바른 기반을 다지는 것이 매우 중요합니다. 바로 이럴 때 필요한 것이 체계적인 React 프로젝트 설정입니다.

필요한 도구들을 미리 준비하고, 폴더 구조를 잘 잡아두면 나중에 개발이 훨씬 수월해집니다.

개요

간단히 말해서, React 프로젝트 설정은 여러분의 채팅 앱을 만들 작업 공간을 준비하는 과정입니다. 마치 요리를 시작하기 전에 재료와 도구를 미리 꺼내놓는 것과 같습니다.

채팅 앱을 만들 때는 기본 React뿐만 아니라 실시간 통신을 위한 Socket.io, 스타일링을 위한 CSS 라이브러리 등이 필요합니다. 예를 들어, 사용자가 메시지를 보내는 순간 상대방 화면에 바로 나타나게 하려면 Socket.io-client가 필수입니다.

전통적인 방법으로는 일일이 HTML 파일을 만들고 JavaScript를 연결했다면, 이제는 Create React App이나 Vite 같은 도구로 몇 초 만에 프로젝트를 생성할 수 있습니다. 핵심 특징은 첫째, 모듈화된 구조로 코드 관리가 쉽고, 둘째, 개발 서버가 자동으로 제공되어 변경사항을 즉시 확인할 수 있으며, 셋째, 필요한 라이브러리를 npm으로 간편하게 설치할 수 있다는 점입니다.

이러한 특징들은 개발 속도를 크게 향상시키고 유지보수를 쉽게 만듭니다.

코드 예제

// package.json - 채팅 앱에 필요한 의존성 설정
{
  "name": "react-chat-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "socket.io-client": "^4.6.0",
    // 날짜 포맷팅을 위한 라이브러리
    "date-fns": "^2.30.0",
    // 스타일링을 위한 emotion
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

설명

이것이 하는 일: React 프로젝트 설정은 채팅 애플리케이션을 개발하기 위한 모든 기본 환경을 구축하는 작업입니다. 개발 서버, 빌드 도구, 필요한 라이브러리들을 한 번에 준비합니다.

첫 번째로, npx create-vite@latest chat-app --template react 명령어로 프로젝트를 생성합니다. Vite는 Create React App보다 빠른 개발 서버를 제공하여 코드 변경 시 즉시 화면에 반영됩니다.

이렇게 하는 이유는 채팅 앱처럼 실시간 피드백이 중요한 개발에서 빠른 개발 환경이 필수이기 때문입니다. 그 다음으로, package.json에 필요한 의존성을 추가하고 npm install을 실행하면 모든 라이브러리가 자동으로 설치됩니다.

socket.io-client는 실시간 통신을, date-fns는 메시지 시간 표시를, emotion은 컴포넌트 스타일링을 담당합니다. 내부에서는 npm이 각 패키지를 다운로드하고 node_modules 폴더에 저장합니다.

마지막으로, src 폴더 안에 components, hooks, utils 같은 폴더를 미리 만들어두면 코드 구조가 깔끔해집니다. components에는 UI 컴포넌트를, hooks에는 재사용 가능한 로직을, utils에는 헬퍼 함수를 넣어 관리합니다.

이렇게 체계적으로 구성하면 나중에 파일을 찾기도 쉽고 팀원과 협업할 때도 혼란이 없습니다. 여러분이 이 설정을 완료하면 언제든지 npm run dev만 실행하면 개발 서버가 시작되고, 코드를 수정할 때마다 브라우저가 자동으로 새로고침됩니다.

또한 모든 팀원이 같은 환경에서 작업할 수 있어 "내 컴퓨터에서는 되는데요" 같은 문제가 사라집니다. TypeScript를 추가하면 타입 안정성까지 확보할 수 있습니다.

실전 팁

💡 Vite를 사용하면 CRA보다 10배 이상 빠른 개발 서버를 경험할 수 있습니다. 특히 프로젝트 규모가 커질수록 차이가 확연합니다.

💡 .env 파일을 만들어 서버 URL 같은 환경변수를 관리하세요. VITE_SERVER_URL=http://localhost:3000 형식으로 작성하면 코드에서 import.meta.env.VITE_SERVER_URL로 접근할 수 있습니다.

💡 ESLint와 Prettier를 초기에 설정해두면 코드 스타일이 일관되게 유지됩니다. npm install -D eslint prettier로 설치 후 설정 파일을 추가하세요.

💡 절대 경로 import를 설정하면 ../../components/Chat 대신 @/components/Chat처럼 깔끔하게 import할 수 있습니다. vite.config.js에서 alias를 설정하면 됩니다.

💡 package.json에 엔진 버전을 명시하면 팀원들이 같은 Node 버전을 사용하게 강제할 수 있습니다. "engines": { "node": ">=18.0.0" } 형식으로 추가하세요.

---

2. Socket.io-client 연동

시작하며

여러분이 채팅 메시지를 보냈는데 상대방이 새로고침을 해야만 메시지를 볼 수 있다면 얼마나 답답할까요? 실제로 초보 개발자들이 만든 채팅 앱에서 자주 볼 수 있는 문제입니다.

HTTP 요청만으로는 실시간 통신이 불가능하기 때문입니다. 이런 문제는 WebSocket 기술로 해결할 수 있지만, 순수 WebSocket API는 사용하기 복잡하고 연결이 끊겼을 때 재연결 로직을 직접 구현해야 합니다.

또한 브라우저 호환성 문제도 신경 써야 합니다. 바로 이럴 때 필요한 것이 Socket.io-client입니다.

WebSocket을 쉽게 사용할 수 있게 해주고, 자동 재연결, 이벤트 기반 통신 등 편리한 기능을 제공합니다.

개요

간단히 말해서, Socket.io-client는 서버와 실시간으로 데이터를 주고받을 수 있게 해주는 도구입니다. 마치 전화 통화처럼 연결이 유지되어 언제든지 즉시 메시지를 전달할 수 있습니다.

일반적인 HTTP 요청은 클라이언트가 먼저 요청해야만 서버가 응답할 수 있지만, Socket.io는 양방향 통신이 가능합니다. 예를 들어, 다른 사용자가 메시지를 보내면 서버가 바로 여러분의 화면에 알림을 보낼 수 있습니다.

기존에는 폴링(Polling) 방식으로 주기적으로 서버에 요청을 보내 새 메시지를 확인했다면, 이제는 Socket.io로 연결을 유지하면서 메시지가 오는 즉시 받을 수 있습니다. 핵심 특징은 첫째, 자동 재연결로 네트워크가 끊겼다가 다시 연결되어도 자동으로 복구되고, 둘째, 이벤트 기반으로 코드가 직관적이며, 셋째, 룸(room) 기능으로 특정 그룹에게만 메시지를 보낼 수 있습니다.

이러한 특징들은 안정적이고 확장 가능한 채팅 시스템을 만드는 데 필수적입니다.

코드 예제

// hooks/useSocket.js - Socket 연결을 관리하는 커스텀 훅
import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

export const useSocket = (serverUrl) => {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // Socket 인스턴스 생성 및 연결
    const socketInstance = io(serverUrl, {
      reconnection: true, // 자동 재연결 활성화
      reconnectionAttempts: 5 // 최대 5번 재시도
    });

    // 연결 성공 이벤트 처리
    socketInstance.on('connect', () => {
      setIsConnected(true);
      console.log('Socket 연결 성공:', socketInstance.id);
    });

    // 연결 끊김 이벤트 처리
    socketInstance.on('disconnect', () => {
      setIsConnected(false);
    });

    setSocket(socketInstance);

    // 컴포넌트 언마운트 시 연결 해제
    return () => socketInstance.disconnect();
  }, [serverUrl]);

  return { socket, isConnected };
};

설명

이것이 하는 일: useSocket 훅은 Socket.io 연결을 생성하고 관리하는 재사용 가능한 로직입니다. 컴포넌트가 마운트될 때 서버에 연결하고, 언마운트될 때 자동으로 연결을 해제합니다.

첫 번째로, io(serverUrl) 함수가 실행되면서 서버와의 WebSocket 연결이 시작됩니다. 이때 reconnection 옵션을 true로 설정하면 네트워크가 불안정해도 자동으로 재연결을 시도합니다.

이렇게 하는 이유는 모바일 환경에서 네트워크가 자주 끊어지는 상황을 대비하기 위함입니다. 그 다음으로, socketInstance.on('connect', callback) 이벤트 리스너가 연결 상태를 감지합니다.

연결이 성공하면 isConnected 상태가 true로 변경되어 UI에서 "온라인" 표시를 할 수 있습니다. 내부적으로는 WebSocket 핸드셰이크가 완료되고 고유한 socket.id가 할당됩니다.

마지막으로, useEffect의 클린업 함수에서 socketInstance.disconnect()를 호출하여 메모리 누수를 방지합니다. 사용자가 채팅 페이지를 벗어나거나 앱을 종료할 때 서버 리소스를 낭비하지 않도록 연결을 정리하는 것이 중요합니다.

여러분이 이 훅을 사용하면 어떤 컴포넌트에서든 const { socket, isConnected } = useSocket(SERVER_URL)만 작성하면 즉시 Socket 기능을 사용할 수 있습니다. 또한 연결 상태를 실시간으로 추적하여 오프라인일 때는 메시지 전송 버튼을 비활성화하는 등의 UX 개선이 가능합니다.

여러 컴포넌트에서 같은 socket 인스턴스를 공유하려면 Context API와 함께 사용하면 됩니다.

실전 팁

💡 Socket 인스턴스는 전역으로 하나만 생성하세요. 여러 개 만들면 불필요한 연결이 많아져 서버에 부담을 줍니다. Context API로 공유하는 것이 좋습니다.

💡 reconnectionDelay 옵션으로 재연결 시도 간격을 조정할 수 있습니다. 기본값은 1초이지만, 서버 상황에 따라 2~3초로 늘리면 서버 과부하를 방지할 수 있습니다.

💡 개발 환경에서는 CORS 에러가 자주 발생합니다. 서버 측 Socket.io 설정에서 cors: { origin: "http://localhost:5173" }를 추가하세요.

💡 연결 실패 시 사용자에게 명확한 피드백을 주세요. socket.on('connect_error', (error) => { ... })로 에러를 캐치하고 Toast 메시지를 표시하면 좋습니다.

💡 프로덕션에서는 transports: ['websocket']을 설정하여 불필요한 폴링을 건너뛰고 바로 WebSocket을 사용하면 성능이 향상됩니다.

---

3. 컴포넌트 구조 설계

시작하며

여러분이 채팅 앱을 만들다가 모든 코드를 하나의 거대한 파일에 넣어서 나중에 수정할 때 어디를 고쳐야 할지 몰라 헤맨 경험이 있나요? 실제로 많은 초보 개발자들이 컴포넌트 분리 없이 개발하다가 코드가 수백 줄로 늘어나면서 유지보수가 불가능해지는 상황을 겪습니다.

이런 문제는 컴포넌트 구조를 미리 설계하지 않아서 발생합니다. 기능이 추가될 때마다 코드를 어디에 넣어야 할지 명확하지 않으면 스파게티 코드가 되어버립니다.

특히 채팅 앱은 메시지 목록, 입력창, 사용자 목록 등 여러 요소가 복합적으로 동작하므로 구조가 더욱 중요합니다. 바로 이럴 때 필요한 것이 체계적인 컴포넌트 구조 설계입니다.

각 컴포넌트의 책임을 명확히 나누고 재사용 가능하게 만들면 개발도 빠르고 유지보수도 쉬워집니다.

개요

간단히 말해서, 컴포넌트 구조 설계는 여러분의 앱을 레고 블록처럼 작은 조각들로 나누는 작업입니다. 각 블록은 하나의 명확한 역할만 담당하고, 필요할 때 조립해서 사용합니다.

채팅 앱에서는 최상위 ChatContainer가 전체를 감싸고, 그 안에 ChatHeader, MessageList, MessageInput 같은 하위 컴포넌트들이 배치됩니다. 예를 들어, MessageList는 메시지 표시만 담당하고, 실제 데이터 가져오기는 부모 컴포넌트가 처리하는 식으로 역할을 분리합니다.

기존에는 하나의 Chat.jsx에 모든 로직을 넣었다면, 이제는 Presentational 컴포넌트(UI만)와 Container 컴포넌트(로직만)로 분리하여 관리할 수 있습니다. 핵심 특징은 첫째, 단일 책임 원칙으로 각 컴포넌트가 하나의 기능만 담당하고, 둘째, 재사용성이 높아 다른 프로젝트에서도 활용 가능하며, 셋째, 테스트가 쉬워진다는 점입니다.

이러한 특징들은 코드 품질을 높이고 개발 속도를 향상시킵니다.

코드 예제

// components/chat/ChatContainer.jsx - 채팅 컨테이너 구조
import React, { useState, useEffect } from 'react';
import ChatHeader from './ChatHeader';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import { useSocket } from '../../hooks/useSocket';

const ChatContainer = ({ roomId, currentUser }) => {
  const [messages, setMessages] = useState([]);
  const { socket, isConnected } = useSocket(process.env.REACT_APP_SERVER_URL);

  // 새 메시지 수신 처리
  useEffect(() => {
    if (!socket) return;

    socket.on('new-message', (message) => {
      setMessages(prev => [...prev, message]);
    });

    return () => socket.off('new-message');
  }, [socket]);

  // 메시지 전송 핸들러
  const handleSendMessage = (content) => {
    if (!socket || !content.trim()) return;

    const message = {
      id: Date.now(),
      content,
      sender: currentUser,
      timestamp: new Date()
    };

    socket.emit('send-message', { roomId, message });
  };

  return (
    <div className="chat-container">
      <ChatHeader roomId={roomId} isConnected={isConnected} />
      <MessageList messages={messages} currentUser={currentUser} />
      <MessageInput onSend={handleSendMessage} disabled={!isConnected} />
    </div>
  );
};

export default ChatContainer;

설명

이것이 하는 일: ChatContainer는 채팅 기능의 중심 컴포넌트로, 메시지 상태 관리와 Socket 통신을 담당하면서 하위 UI 컴포넌트들을 조율합니다. 전체적인 데이터 흐름을 제어하는 컨트롤러 역할을 합니다.

첫 번째로, useState로 messages 배열을 관리하며 모든 채팅 메시지를 저장합니다. useSocket 훅으로 Socket 연결을 가져오고, roomId props로 어느 채팅방인지 식별합니다.

이렇게 상태를 최상위에서 관리하는 이유는 여러 자식 컴포넌트가 같은 데이터를 공유해야 하기 때문입니다. 그 다음으로, useEffect 안에서 socket.on('new-message')로 실시간 메시지를 수신합니다.

새 메시지가 도착하면 setMessages로 기존 배열에 추가하여 화면에 즉시 표시됩니다. 클린업 함수에서 socket.off()를 호출하여 이벤트 리스너가 중복으로 등록되는 것을 방지하는 것이 핵심입니다.

마지막으로, handleSendMessage 함수를 MessageInput에 props로 전달하여 사용자가 입력한 메시지를 서버로 전송합니다. 이때 content가 비어있지 않은지 검증하고, 메시지 객체에 timestamp를 추가하여 나중에 정렬할 수 있게 합니다.

세 개의 하위 컴포넌트(Header, List, Input)는 각각 표시, 목록, 입력이라는 단일 책임만 가집니다. 여러분이 이 구조를 사용하면 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있습니다.

예를 들어 MessageList만 따로 떼어내서 다양한 메시지 데이터로 테스트하거나, MessageInput을 다른 프로젝트의 댓글 입력창으로 재사용할 수 있습니다. 또한 나중에 기능을 추가할 때 어느 파일을 수정해야 할지 명확하므로 개발 시간이 단축됩니다.

실전 팁

💡 Container/Presentational 패턴을 활용하세요. ChatContainer는 로직을, ChatView는 순수 UI만 담당하게 분리하면 재사용성이 더욱 높아집니다.

💡 컴포넌트 파일명은 PascalCase를 사용하고, 폴더는 기능별로 묶으세요. components/chat/, components/user/ 식으로 구성하면 찾기 쉽습니다.

💡 Props drilling이 3단계를 넘어가면 Context API나 상태관리 라이브러리를 고려하세요. 5단계 이상 전달하면 코드가 복잡해집니다.

💡 각 컴포넌트는 100줄을 넘지 않도록 유지하세요. 넘어가면 더 작은 컴포넌트로 분리할 시점입니다.

💡 PropTypes나 TypeScript로 props 타입을 명시하면 실수를 줄이고 협업할 때 의사소통이 명확해집니다.

---

4. 채팅방 목록 UI

시작하며

여러분이 카카오톡이나 디스코드를 사용할 때 왼쪽에 채팅방 목록이 나타나는 것을 보셨을 겁니다. 각 채팅방마다 마지막 메시지와 시간, 안 읽은 메시지 개수가 표시되어 어느 방에 새 메시지가 왔는지 한눈에 알 수 있죠.

이런 UI가 없다면 사용자는 모든 채팅방을 일일이 클릭해봐야 합니다. 이런 문제는 실제 서비스에서 사용자 경험을 크게 떨어뜨립니다.

채팅방이 10개만 넘어가도 어디에 새 메시지가 있는지 찾기 어렵고, 중요한 대화를 놓칠 수 있습니다. 또한 목록이 잘 정리되어 있지 않으면 앱이 복잡하고 어려워 보입니다.

바로 이럴 때 필요한 것이 직관적인 채팅방 목록 UI입니다. 각 채팅방의 상태를 시각적으로 보여주고, 최신 활동 순으로 정렬하여 사용자가 원하는 대화를 빠르게 찾을 수 있게 합니다.

개요

간단히 말해서, 채팅방 목록 UI는 여러분이 참여 중인 모든 대화방을 한 곳에 모아 보여주는 화면입니다. 마치 책장에 책들이 정리된 것처럼 각 채팅방을 정돈해서 표시합니다.

이 UI에는 채팅방 이름, 마지막 메시지 미리보기, 시간, 안 읽은 메시지 배지 등이 포함됩니다. 예를 들어, 회사 단체 채팅방에 새 공지가 올라오면 빨간 배지로 알려주어 놓치지 않게 합니다.

기존에는 단순한 텍스트 링크 목록으로 표시했다면, 이제는 프로필 이미지, 타임스탬프, 온라인 상태 표시 등 풍부한 정보를 담은 카드 형태로 보여줄 수 있습니다. 핵심 특징은 첫째, 실시간 업데이트로 새 메시지가 오면 목록이 자동으로 재정렬되고, 둘째, 가상 스크롤로 수백 개의 채팅방도 부드럽게 표시되며, 셋째, 필터링과 검색 기능으로 원하는 대화를 빠르게 찾을 수 있습니다.

이러한 특징들은 사용자가 앱을 효율적으로 사용하게 만듭니다.

코드 예제

// components/chat/ChatRoomList.jsx - 채팅방 목록 컴포넌트
import React from 'react';
import styled from '@emotion/styled';
import { formatDistanceToNow } from 'date-fns';
import { ko } from 'date-fns/locale';

const ChatRoomList = ({ rooms, currentRoomId, onSelectRoom }) => {
  return (
    <Container>
      {rooms.map(room => (
        <RoomCard
          key={room.id}
          active={room.id === currentRoomId}
          onClick={() => onSelectRoom(room.id)}
        >
          <Avatar src={room.avatar} alt={room.name} />
          <Content>
            <Header>
              <RoomName>{room.name}</RoomName>
              <Timestamp>
                {formatDistanceToNow(new Date(room.lastMessageTime), {
                  addSuffix: true,
                  locale: ko
                })}
              </Timestamp>
            </Header>
            <LastMessage>{room.lastMessage}</LastMessage>
          </Content>
          {room.unreadCount > 0 && (
            <Badge>{room.unreadCount}</Badge>
          )}
        </RoomCard>
      ))}
    </Container>
  );
};

const Container = styled.div`
  width: 300px;
  background: #f8f9fa;
  overflow-y: auto;
`;

const RoomCard = styled.div`
  display: flex;
  padding: 12px;
  cursor: pointer;
  background: ${props => props.active ? '#e3f2fd' : 'white'};
  border-bottom: 1px solid #e0e0e0;
  &:hover { background: #f5f5f5; }
`;

const Avatar = styled.img`
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
`;

const Content = styled.div`
  flex: 1;
  overflow: hidden;
`;

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
`;

const RoomName = styled.span`
  font-weight: 600;
  font-size: 14px;
`;

const Timestamp = styled.span`
  font-size: 12px;
  color: #999;
`;

const LastMessage = styled.p`
  margin: 0;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Badge = styled.span`
  background: #ff5252;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  align-self: center;
`;

export default ChatRoomList;

설명

이것이 하는 일: ChatRoomList는 여러 채팅방을 시각적으로 구성하여 사용자가 쉽게 탐색하고 선택할 수 있게 하는 컴포넌트입니다. 각 채팅방의 상태와 정보를 한눈에 파악할 수 있도록 디자인되었습니다.

첫 번째로, rooms 배열을 map으로 순회하며 각 채팅방을 RoomCard로 렌더링합니다. active props를 사용하여 현재 선택된 채팅방은 다른 색상으로 강조 표시됩니다.

이렇게 하는 이유는 사용자가 지금 어느 대화방을 보고 있는지 시각적 피드백을 제공하기 위함입니다. 그 다음으로, formatDistanceToNow 함수로 마지막 메시지 시간을 "3분 전", "2시간 전" 같은 상대적 표현으로 변환합니다.

절대 시간("14:32")보다 상대 시간이 사용자에게 더 직관적입니다. 내부적으로는 date-fns가 현재 시간과의 차이를 계산하고 한국어 locale을 적용하여 자연스러운 문장을 만듭니다.

마지막으로, unreadCount가 0보다 크면 빨간 배지를 표시하여 새 메시지가 있음을 알립니다. CSS의 text-overflow: ellipsis로 긴 메시지는 "안녕하세요 오늘 회의..."처럼 잘라서 보여줍니다.

클릭 이벤트는 onSelectRoom 콜백으로 부모 컴포넌트에 전달되어 실제 채팅 화면 전환을 처리합니다. 여러분이 이 컴포넌트를 사용하면 카카오톡과 같은 전문적인 채팅 앱의 UX를 제공할 수 있습니다.

사용자는 어느 대화가 활발한지, 어디에 답변해야 할지 즉시 파악할 수 있습니다. 또한 가상 스크롤 라이브러리(react-window)를 추가하면 수천 개의 채팅방도 렉 없이 표시할 수 있습니다.

검색 기능을 추가하면 채팅방 이름으로 필터링하여 더욱 편리합니다.

실전 팁

💡 무한 스크롤을 구현하려면 Intersection Observer API를 사용하세요. 목록 끝에 도달하면 자동으로 다음 페이지를 로드할 수 있습니다.

💡 채팅방 목록은 마지막 메시지 시간 기준 내림차순으로 정렬하세요. rooms.sort((a, b) => b.lastMessageTime - a.lastMessageTime) 형식으로 구현합니다.

💡 로딩 상태에 스켈레톤 UI를 사용하면 사용자 경험이 좋아집니다. 실제 카드와 비슷한 회색 박스를 표시하는 것이 빈 화면보다 낫습니다.

💡 안 읽은 메시지가 99개를 넘으면 "99+"로 표시하세요. 너무 큰 숫자는 UI를 깨뜨릴 수 있습니다.

💡 채팅방을 스와이프하여 삭제하는 기능을 추가하면 모바일 UX가 향상됩니다. react-swipeable 라이브러리를 활용하세요.

---

5. 메시지 UI 컴포넌트

시작하며

여러분이 채팅 앱에서 자신이 보낸 메시지와 상대방이 보낸 메시지를 구분하지 못한다면 얼마나 혼란스러울까요? 실제로 메시지 디자인이 잘못되면 누가 뭐라고 했는지 파악하기 어렵고, 대화의 흐름을 놓치게 됩니다.

이런 문제는 실제 서비스에서 사용자 이탈로 이어집니다. 메시지가 시간순으로 정렬되지 않거나, 내 메시지와 상대 메시지의 시각적 차이가 없으면 사용자는 앱을 사용하기 불편해합니다.

특히 그룹 채팅에서는 누가 말한 건지 명확히 표시하는 것이 필수입니다. 바로 이럴 때 필요한 것이 잘 설계된 메시지 UI 컴포넌트입니다.

내 메시지는 오른쪽에 파란색으로, 상대 메시지는 왼쪽에 회색으로 배치하여 직관적으로 구분할 수 있게 합니다.

개요

간단히 말해서, 메시지 UI 컴포넌트는 각각의 채팅 메시지를 화면에 예쁘게 표시하는 작은 카드입니다. 마치 편지를 예쁜 봉투에 담는 것처럼 메시지 내용을 보기 좋게 포장합니다.

이 컴포넌트는 메시지 내용뿐만 아니라 발신자 이름, 프로필 사진, 전송 시간, 읽음 표시 등 다양한 정보를 포함합니다. 예를 들어, 여러분이 메시지를 보내면 오른쪽에 정렬되고 "읽음" 표시가 나타나 상대방이 확인했는지 알 수 있습니다.

기존에는 단순한 텍스트 줄로 표시했다면, 이제는 말풍선 스타일의 버블에 그림자와 둥근 모서리를 적용하여 현대적인 채팅 앱처럼 보이게 할 수 있습니다. 핵심 특징은 첫째, 조건부 스타일링으로 발신자에 따라 자동으로 디자인이 바뀌고, 둘째, 타임스탬프 그룹핑으로 같은 시간대 메시지를 묶어 표시하며, 셋째, 이미지나 파일 같은 다양한 메시지 타입을 지원합니다.

이러한 특징들은 사용자가 대화를 자연스럽게 읽을 수 있게 만듭니다.

코드 예제

// components/chat/Message.jsx - 개별 메시지 컴포넌트
import React from 'react';
import styled from '@emotion/styled';
import { format } from 'date-fns';

const Message = ({ message, isOwnMessage, showAvatar, showName }) => {
  return (
    <MessageWrapper isOwnMessage={isOwnMessage}>
      {!isOwnMessage && showAvatar && (
        <Avatar src={message.sender.avatar} alt={message.sender.name} />
      )}
      <MessageContent isOwnMessage={isOwnMessage}>
        {!isOwnMessage && showName && (
          <SenderName>{message.sender.name}</SenderName>
        )}
        <Bubble isOwnMessage={isOwnMessage}>
          {message.type === 'text' && <Text>{message.content}</Text>}
          {message.type === 'image' && (
            <MessageImage src={message.content} alt="전송된 이미지" />
          )}
        </Bubble>
        <MessageInfo isOwnMessage={isOwnMessage}>
          {message.isRead && <ReadStatus>읽음</ReadStatus>}
          <Timestamp>
            {format(new Date(message.timestamp), 'HH:mm')}
          </Timestamp>
        </MessageInfo>
      </MessageContent>
    </MessageWrapper>
  );
};

const MessageWrapper = styled.div`
  display: flex;
  justify-content: ${props => props.isOwnMessage ? 'flex-end' : 'flex-start'};
  margin: 8px 16px;
`;

const Avatar = styled.img`
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
`;

const MessageContent = styled.div`
  display: flex;
  flex-direction: column;
  align-items: ${props => props.isOwnMessage ? 'flex-end' : 'flex-start'};
  max-width: 60%;
`;

const SenderName = styled.span`
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  margin-left: 8px;
`;

const Bubble = styled.div`
  background: ${props => props.isOwnMessage ? '#1976d2' : '#e0e0e0'};
  color: ${props => props.isOwnMessage ? 'white' : '#333'};
  padding: 10px 14px;
  border-radius: 18px;
  word-wrap: break-word;
`;

const Text = styled.p`
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
`;

const MessageImage = styled.img`
  max-width: 200px;
  border-radius: 8px;
`;

const MessageInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-direction: ${props => props.isOwnMessage ? 'row-reverse' : 'row'};
`;

const ReadStatus = styled.span`
  font-size: 11px;
  color: #4caf50;
`;

const Timestamp = styled.span`
  font-size: 11px;
  color: #999;
`;

export default Message;

설명

이것이 하는 일: Message 컴포넌트는 하나의 채팅 메시지를 모든 관련 정보와 함께 렌더링합니다. 발신자, 내용, 시간, 읽음 상태를 시각적으로 구성하여 자연스러운 대화 흐름을 만듭니다.

첫 번째로, isOwnMessage props에 따라 메시지 정렬 방향과 색상이 결정됩니다. 내 메시지면 justify-content: flex-end로 오른쪽 정렬되고 파란색 배경을, 상대 메시지면 왼쪽 정렬에 회색 배경을 적용합니다.

이렇게 하는 이유는 모든 메신저 앱에서 사용하는 표준 UX 패턴이기 때문입니다. 그 다음으로, showAvatar와 showName props로 프로필 사진과 이름 표시 여부를 제어합니다.

같은 사람이 연속으로 메시지를 보낸 경우 첫 메시지에만 이름을 표시하고 나머지는 생략하여 화면을 깔끔하게 유지합니다. 내부적으로 부모 컴포넌트(MessageList)가 이전 메시지와 발신자를 비교하여 이 값을 결정합니다.

마지막으로, message.type에 따라 다른 콘텐츠를 렌더링합니다. 텍스트면 일반 텍스트를, 이미지면 img 태그를 표시합니다.

format 함수로 timestamp를 "14:32" 형식으로 변환하고, isRead가 true면 "읽음" 텍스트를 초록색으로 표시합니다. max-width: 60%로 메시지가 화면을 꽉 채우지 않게 제한합니다.

여러분이 이 컴포넌트를 사용하면 카카오톡이나 텔레그램 수준의 메시지 디자인을 구현할 수 있습니다. 사용자는 누가 언제 무슨 말을 했는지 즉시 파악할 수 있고, 대화가 자연스럽게 흐릅니다.

나중에 메시지 타입을 확장하여 파일, 위치, 음성 메시지 등을 추가할 수도 있습니다. 애니메이션을 추가하면 새 메시지가 부드럽게 나타나는 효과도 가능합니다.

실전 팁

💡 긴 URL은 자동으로 링크로 변환하세요. linkifyjs 라이브러리를 사용하면 linkify(message.content)만으로 간단히 구현됩니다.

💡 이모지는 크기를 키워서 표시하면 더 보기 좋습니다. 메시지가 이모지만 있으면 font-size를 32px로 설정하세요.

💡 메시지 복사 기능을 추가하려면 말풍선을 길게 눌렀을 때 컨텍스트 메뉴를 표시하세요. navigator.clipboard.writeText()로 클립보드에 복사합니다.

💡 메시지 전송 실패 시 빨간 느낌표 아이콘을 표시하고 재전송 버튼을 제공하면 UX가 좋아집니다.

💡 다크모드를 지원하려면 색상을 CSS 변수로 관리하세요. --bubble-own: #1976d2, --bubble-other: #e0e0e0 형식으로 정의하면 테마 전환이 쉽습니다.

---

6. 입력창 및 전송 기능

시작하며

여러분이 채팅 앱에서 메시지를 입력하는데 엔터를 누르면 줄바꿈이 되지 않고 바로 전송되어서 짧은 문장만 보낼 수 있다면 답답하지 않을까요? 반대로 엔터가 전송이 아니라 줄바꿈만 되면 메시지를 보내려고 버튼을 찾아야 하는 불편함이 있습니다.

이런 문제는 입력창 UX 설계가 잘못되어서 발생합니다. 사용자가 기대하는 동작과 실제 동작이 다르면 사용성이 크게 떨어집니다.

또한 빈 메시지를 보내거나, 전송 중에 중복으로 메시지를 보내는 버그도 흔히 발생합니다. 바로 이럴 때 필요한 것이 잘 설계된 입력창 컴포넌트입니다.

Shift+Enter로 줄바꿈, Enter로 전송하는 표준 동작을 구현하고, 전송 중에는 버튼을 비활성화하여 중복 전송을 방지합니다.

개요

간단히 말해서, 입력창 컴포넌트는 사용자가 메시지를 작성하고 전송하는 인터페이스입니다. 마치 편지지와 우체통이 합쳐진 것처럼 입력과 전송을 한 곳에서 처리합니다.

이 컴포넌트는 텍스트 입력 영역, 전송 버튼, 선택적으로 파일 첨부 버튼 등을 포함합니다. 예를 들어, 여러분이 긴 메시지를 작성할 때 입력창이 자동으로 높이가 늘어나 여러 줄을 편하게 볼 수 있습니다.

기존에는 고정 높이의 input 태그를 사용했다면, 이제는 자동 확장되는 textarea로 긴 메시지도 편하게 작성할 수 있습니다. 핵심 특징은 첫째, 자동 높이 조절로 내용에 따라 입력창이 커지고, 둘째, 키보드 단축키 지원으로 빠르게 전송하며, 셋째, 입력 중 표시(typing indicator)로 상대방이 내가 타이핑 중임을 알 수 있습니다.

이러한 특징들은 메시지 작성을 빠르고 편하게 만듭니다.

코드 예제

// components/chat/MessageInput.jsx - 메시지 입력 컴포넌트
import React, { useState, useRef, useEffect } from 'react';
import styled from '@emotion/styled';

const MessageInput = ({ onSend, disabled }) => {
  const [content, setContent] = useState('');
  const [isSending, setIsSending] = useState(false);
  const textareaRef = useRef(null);

  // textarea 높이 자동 조절
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height =
        textareaRef.current.scrollHeight + 'px';
    }
  }, [content]);

  const handleKeyDown = (e) => {
    // Shift+Enter는 줄바꿈, Enter만 누르면 전송
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  const handleSubmit = async () => {
    if (!content.trim() || isSending || disabled) return;

    setIsSending(true);
    try {
      await onSend(content);
      setContent(''); // 전송 성공 시 입력창 비우기
    } catch (error) {
      console.error('메시지 전송 실패:', error);
      alert('메시지 전송에 실패했습니다.');
    } finally {
      setIsSending(false);
      textareaRef.current?.focus(); // 포커스 유지
    }
  };

  return (
    <Container>
      <InputWrapper>
        <Textarea
          ref={textareaRef}
          value={content}
          onChange={(e) => setContent(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="메시지를 입력하세요... (Enter: 전송, Shift+Enter: 줄바꿈)"
          disabled={disabled || isSending}
          rows={1}
        />
        <SendButton
          onClick={handleSubmit}
          disabled={!content.trim() || disabled || isSending}
        >
          {isSending ? '전송중...' : '전송'}
        </SendButton>
      </InputWrapper>
    </Container>
  );
};

const Container = styled.div`
  border-top: 1px solid #e0e0e0;
  background: white;
  padding: 12px;
`;

const InputWrapper = styled.div`
  display: flex;
  gap: 8px;
  align-items: flex-end;
`;

const Textarea = styled.textarea`
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
  font-family: inherit;
  &:focus {
    outline: none;
    border-color: #1976d2;
  }
  &:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }
`;

const SendButton = styled.button`
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-weight: 600;
  &:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  &:hover:not(:disabled) {
    background: #1565c0;
  }
`;

export default MessageInput;

설명

이것이 하는 일: MessageInput은 사용자의 메시지 입력을 받아 검증하고 전송하는 전체 프로세스를 관리합니다. 입력 상태, 전송 상태, 키보드 이벤트를 모두 처리하여 부드러운 UX를 제공합니다.

첫 번째로, useRef로 textarea 요소를 참조하고 content 상태가 변경될 때마다 scrollHeight를 계산하여 높이를 자동 조절합니다. 한 줄일 때는 작게, 여러 줄로 늘어나면 자동으로 커지며 max-height: 120px까지만 늘어나고 그 이후는 스크롤됩니다.

이렇게 하는 이유는 입력창이 화면을 너무 많이 차지하지 않으면서도 긴 메시지를 편하게 작성하게 하기 위함입니다. 그 다음으로, handleKeyDown에서 키보드 이벤트를 감지합니다.

Enter만 누르면 e.preventDefault()로 기본 줄바꿈을 막고 handleSubmit을 호출하여 메시지를 전송합니다. Shift+Enter를 함께 누르면 조건문을 통과하지 못해 기본 줄바꿈 동작이 실행됩니다.

내부적으로는 이벤트 버블링을 활용하여 키 조합을 정확히 감지합니다. 마지막으로, handleSubmit에서는 여러 검증을 수행합니다.

content.trim()으로 공백만 있는 메시지는 전송을 막고, isSending 플래그로 전송 중 중복 클릭을 방지하며, disabled props로 오프라인일 때는 전송을 차단합니다. 전송 성공 후 setContent('')로 입력창을 비우고 focus()로 커서를 다시 입력창에 위치시켜 연속으로 메시지를 보낼 수 있게 합니다.

여러분이 이 컴포넌트를 사용하면 카카오톡처럼 직관적인 메시지 입력 경험을 제공할 수 있습니다. 사용자는 빠르게 메시지를 작성하고 Enter만 눌러 즉시 전송할 수 있습니다.

나중에 파일 첨부 버튼을 추가하거나, 이모지 피커를 통합하거나, 음성 메시지 녹음 기능을 추가할 수도 있습니다. 디바운싱을 추가하면 타이핑 중 표시 기능도 구현 가능합니다.

실전 팁

💡 타이핑 중 표시를 구현하려면 입력 중일 때 debounce로 서버에 'typing' 이벤트를 보내세요. 3초간 입력이 없으면 'stop-typing'을 전송합니다.

💡 입력창에 멘션 기능(@username)을 추가하려면 draft-js나 slate.js 같은 리치 텍스트 에디터 라이브러리를 고려하세요.

💡 모바일에서 키보드가 올라올 때 입력창이 가려지는 문제는 window.visualViewport API로 해결할 수 있습니다.

💡 파일 첨부는 input[type="file"]을 숨기고 예쁜 아이콘 버튼으로 트리거하세요. fileInputRef.current.click()로 파일 선택창을 엽니다.

💡 메시지 임시 저장 기능을 추가하려면 localStorage에 chatDraft_${roomId} 키로 저장하고 컴포넌트 마운트 시 복원하세요.

---

7. 상태 관리 (Context/Redux)

시작하며

여러분이 채팅 앱을 만들다가 메시지 목록, 현재 사용자 정보, 온라인 상태 등을 여러 컴포넌트에서 사용해야 하는 상황을 겪었나요? props로 데이터를 5단계 이상 전달하다 보면 코드가 복잡해지고, 어느 컴포넌트가 어떤 데이터를 받는지 추적하기 어려워집니다.

이런 문제는 실제 프로젝트에서 유지보수를 어렵게 만듭니다. 새로운 기능을 추가할 때마다 여러 컴포넌트를 수정해야 하고, props 이름을 바꾸면 연결된 모든 컴포넌트를 찾아 고쳐야 합니다.

특히 채팅처럼 실시간으로 상태가 변하는 앱에서는 더욱 복잡합니다. 바로 이럴 때 필요한 것이 중앙화된 상태 관리입니다.

Context API나 Redux로 전역 상태를 관리하면 어느 컴포넌트에서든 필요한 데이터를 직접 가져올 수 있습니다.

개요

간단히 말해서, 상태 관리는 앱의 모든 데이터를 한 곳에 모아 관리하는 시스템입니다. 마치 도서관의 중앙 데이터베이스처럼 모든 정보가 정리되어 있어 필요할 때 바로 찾을 수 있습니다.

채팅 앱에서는 현재 로그인한 사용자, 모든 채팅방 목록, 각 방의 메시지들, 온라인 사용자 목록 등을 전역 상태로 관리합니다. 예를 들어, 사용자가 로그아웃하면 한 번의 액션으로 모든 상태를 초기화하고 로그인 화면으로 이동시킬 수 있습니다.

기존에는 각 컴포넌트가 개별적으로 상태를 관리하고 props로 전달했다면, 이제는 Context나 Redux store에서 필요한 상태만 선택하여 가져올 수 있습니다. 핵심 특징은 첫째, 단일 진실 공급원(Single Source of Truth)으로 데이터 일관성이 보장되고, 둘째, 예측 가능한 상태 변경으로 디버깅이 쉬우며, 셋째, 시간 여행 디버깅(Redux DevTools)으로 상태 변화를 추적할 수 있습니다.

이러한 특징들은 대규모 앱 개발에 필수적입니다.

코드 예제

// context/ChatContext.jsx - Context API를 이용한 채팅 상태 관리
import React, { createContext, useContext, useReducer, useEffect } from 'react';
import { useSocket } from '../hooks/useSocket';

const ChatContext = createContext();

// 상태 변경 로직을 담당하는 reducer
const chatReducer = (state, action) => {
  switch (action.type) {
    case 'SET_ROOMS':
      return { ...state, rooms: action.payload };

    case 'ADD_MESSAGE':
      return {
        ...state,
        messages: {
          ...state.messages,
          [action.payload.roomId]: [
            ...(state.messages[action.payload.roomId] || []),
            action.payload.message
          ]
        }
      };

    case 'SET_CURRENT_ROOM':
      return { ...state, currentRoomId: action.payload };

    case 'UPDATE_UNREAD_COUNT':
      return {
        ...state,
        rooms: state.rooms.map(room =>
          room.id === action.payload.roomId
            ? { ...room, unreadCount: action.payload.count }
            : room
        )
      };

    default:
      return state;
  }
};

export const ChatProvider = ({ children, currentUser }) => {
  const [state, dispatch] = useReducer(chatReducer, {
    rooms: [],
    messages: {},
    currentRoomId: null,
    currentUser
  });

  const { socket, isConnected } = useSocket(process.env.REACT_APP_SERVER_URL);

  // Socket 이벤트 리스너 설정
  useEffect(() => {
    if (!socket) return;

    socket.on('new-message', ({ roomId, message }) => {
      dispatch({ type: 'ADD_MESSAGE', payload: { roomId, message } });

      // 현재 보고 있지 않은 방이면 읽지 않음 개수 증가
      if (roomId !== state.currentRoomId) {
        dispatch({
          type: 'UPDATE_UNREAD_COUNT',
          payload: { roomId, count: /* 계산 로직 */ }
        });
      }
    });

    socket.on('rooms-list', (rooms) => {
      dispatch({ type: 'SET_ROOMS', payload: rooms });
    });

    return () => {
      socket.off('new-message');
      socket.off('rooms-list');
    };
  }, [socket, state.currentRoomId]);

  const sendMessage = (content) => {
    if (!socket || !state.currentRoomId) return;

    const message = {
      id: Date.now(),
      content,
      sender: currentUser,
      timestamp: new Date()
    };

    socket.emit('send-message', {
      roomId: state.currentRoomId,
      message
    });
  };

  const selectRoom = (roomId) => {
    dispatch({ type: 'SET_CURRENT_ROOM', payload: roomId });
    // 읽지 않음 개수 초기화
    dispatch({ type: 'UPDATE_UNREAD_COUNT', payload: { roomId, count: 0 } });
  };

  const value = {
    ...state,
    isConnected,
    sendMessage,
    selectRoom
  };

  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
};

// 커스텀 훅으로 간편하게 사용
export const useChat = () => {
  const context = useContext(ChatContext);
  if (!context) {
    throw new Error('useChat must be used within ChatProvider');
  }
  return context;
};

설명

이것이 하는 일: ChatContext는 채팅 앱의 모든 상태와 상태 변경 로직을 캡슐화하여 어느 컴포넌트에서든 쉽게 접근할 수 있게 합니다. Provider 패턴으로 하위 모든 컴포넌트에 상태를 공유합니다.

첫 번째로, useReducer로 복잡한 상태 로직을 관리합니다. chatReducer 함수가 모든 상태 변경을 중앙에서 처리하여 예측 가능하고 테스트하기 쉽습니다.

rooms 배열, messages 객체, currentRoomId 등을 하나의 state 객체에 담아 관리합니다. 이렇게 하는 이유는 관련된 상태들을 함께 관리하면 데이터 일관성이 보장되기 때문입니다.

그 다음으로, useEffect에서 Socket 이벤트를 구독하고 받은 데이터로 상태를 업데이트합니다. 'new-message' 이벤트가 오면 dispatch로 ADD_MESSAGE 액션을 발생시켜 해당 채팅방의 메시지 배열에 추가합니다.

내부적으로는 불변성을 유지하며 새로운 state 객체를 생성하여 React가 변경을 감지하고 리렌더링합니다. 마지막으로, sendMessage와 selectRoom 같은 헬퍼 함수를 제공하여 컴포넌트에서 복잡한 로직을 신경 쓰지 않게 합니다.

useChat 커스텀 훅으로 const { rooms, sendMessage } = useChat()처럼 간단히 사용할 수 있습니다. Provider 외부에서 사용하려 하면 명확한 에러 메시지를 표시하여 실수를 방지합니다.

여러분이 이 패턴을 사용하면 props drilling을 완전히 제거하고 컴포넌트를 단순하게 유지할 수 있습니다. 어느 컴포넌트에서든 useChat()만 호출하면 필요한 데이터와 함수를 가져올 수 있어 개발 속도가 빨라집니다.

Redux를 사용하면 Redux DevTools로 모든 액션과 상태 변화를 시각적으로 추적하여 디버깅이 훨씬 쉬워집니다. 미들웨어를 추가하면 로깅, 에러 추적, 비동기 작업도 체계적으로 관리할 수 있습니다.

실전 팁

💡 Context를 기능별로 분리하세요. ChatContext, UserContext, ThemeContext처럼 나누면 불필요한 리렌더링을 줄일 수 있습니다.

💡 큰 앱에서는 Redux Toolkit을 사용하면 보일러플레이트 코드가 크게 줄어듭니다. createSlice로 reducer와 action을 한 번에 정의할 수 있습니다.

💡 Zustand나 Jotai 같은 경량 상태관리 라이브러리도 고려하세요. Redux보다 간단하면서도 충분한 기능을 제공합니다.

💡 상태를 localStorage에 동기화하여 새로고침해도 데이터가 유지되게 할 수 있습니다. redux-persist 라이브러리가 이 작업을 자동화합니다.

💡 성능 최적화를 위해 useMemo와 useCallback을 Context value에 적용하세요. 불필요한 리렌더링을 방지할 수 있습니다.

---