리액트 네이티브로 실시간 채팅 앱 만들기 🚀

안녕, 친구들! 오늘은 정말 재밌고 유용한 주제로 찾아왔어. 바로 리액트 네이티브를 사용해서 실시간 채팅 앱을 만드는 방법에 대해 알아볼 거야. 😎 이 글을 읽고 나면, 너도 나도 모두가 채팅 앱 개발의 달인이 될 수 있을 거야!

요즘 모바일 앱 개발이 대세라고 하지? 그 중에서도 채팅 기능은 거의 모든 앱에서 필수적으로 들어가는 요소야. 친구들이랑 수다 떨 때, 게임할 때 전략 짜기, 심지어 재능넷 같은 재능 공유 플랫폼에서도 채팅은 빠질 수 없지. 그래서 오늘은 이 꿀잼 기능을 직접 만들어보자고!

🎨 재능넷 꿀팁: 채팅 앱 개발 실력을 키우면, 재능넷에서 앱 개발 관련 재능을 공유하거나 판매할 수 있어! 누군가에겐 네 실력이 금이 될 수 있다고. 😉

자, 이제 본격적으로 시작해볼까? 준비됐어? 그럼 고고씽! 🏃‍♂️💨

1. 리액트 네이티브란 뭐야? 🤔

먼저 리액트 네이티브가 뭔지 알아야겠지? 간단히 말하면, 리액트 네이티브는 페이스북에서 만든 모바일 앱 개발 프레임워크야. 리액트(웹용)의 친구라고 생각하면 돼. 근데 이 친구는 좀 특별해. 왜? JavaScript로 코딩하는데, 네이티브 앱으로 변환해주거든!

쉽게 말해서, 한 번 코딩하면 iOS랑 Android 앱을 동시에 만들 수 있다는 거지. 개발자들한테는 정말 꿈같은 이야기 아니겠어? 😍

💡 알쏭달쏭 팁: 리액트 네이티브로 만든 앱은 '진짜' 네이티브 앱이야. 웹뷰로 돌아가는 게 아니라, 진짜 네이티브 컴포넌트를 사용한다고!

리액트 네이티브의 장점을 좀 더 자세히 알아볼까?

크로스 플랫폼: iOS랑 Android 두 마리 토끼를 한 번에 잡을 수 있어!
성능이 좋아: 네이티브 컴포넌트를 사용하니까 성능도 짱!
개발 속도가 빨라: 코드 수정하면 바로바로 화면에 반영되는 핫 리로딩 기능이 있어.
커뮤니티가 활발해: 문제가 생겨도 금방 해결할 수 있지!

근데 단점도 있겠지? 물론이야. 완벽한 건 없으니까.

네이티브 기능을 100% 사용하기 어려울 수 있어.
업데이트가 자주 일어나서 따라가기 힘들 수 있어.
앱 크기가 조금 클 수 있어.

그래도 장점이 훨씬 많으니까, 우리는 리액트 네이티브로 갑니다! 👍

위 그림을 보면 리액트 네이티브가 어떻게 동작하는지 한눈에 알 수 있지? 리액트 네이티브로 코딩하면, 그게 Android와 iOS 앱으로 변환되는 거야. 정말 멋지지 않아? 😎

자, 이제 리액트 네이티브가 뭔지 알았으니까, 본격적으로 채팅 앱을 만들어볼까? 준비됐어? 그럼 다음 섹션으로 고고! 🚀

2. 개발 환경 설정하기 🛠️

자, 이제 진짜 시작이야! 채팅 앱을 만들기 전에 먼저 개발 환경을 설정해야 해. 걱정 마, 어렵지 않아. 그냥 요리 준비하는 것처럼 재료랑 도구 준비하는 거라고 생각하면 돼. 😉

1. Node.js 설치하기

먼저 Node.js를 설치해야 해. Node.js는 자바스크립트를 서버에서 실행할 수 있게 해주는 플랫폼이야. 리액트 네이티브를 사용하려면 꼭 필요해!

Node.js 공식 웹사이트(https://nodejs.org)에 가서 LTS 버전을 다운로드하고 설치하면 돼. 쉽지?

🌱 초보자 팁: LTS는 'Long Term Support'의 약자야. 안정적이고 장기적으로 지원되는 버전이라 초보자한테 딱이지!

2. 리액트 네이티브 CLI 설치하기

Node.js를 설치했으면 이제 리액트 네이티브 CLI를 설치할 차례야. CLI는 'Command Line Interface'의 약자로, 터미널에서 명령어로 리액트 네이티브 프로젝트를 만들고 관리할 수 있게 해줘.

터미널을 열고 다음 명령어를 입력해봐:

npm install -g react-native-cli

이 명령어는 리액트 네이티브 CLI를 글로벌로 설치한다는 뜻이야. '-g'가 바로 '글로벌'을 의미하지.

3. 안드로이드 스튜디오 설치하기 (안드로이드 개발용)

안드로이드 앱을 개발하고 싶다면 안드로이드 스튜디오를 설치해야 해. 안드로이드 스튜디오는 구글에서 제공하는 공식 안드로이드 개발 도구야.

안드로이드 스튜디오 공식 웹사이트(https://developer.android.com/studio)에서 다운로드받아 설치하면 돼. 설치 과정에서 'Android SDK'를 꼭 선택해야 해!

4. Xcode 설치하기 (iOS 개발용, Mac 전용)

iOS 앱을 개발하고 싶다면 Xcode를 설치해야 해. Xcode는 애플에서 제공하는 공식 iOS 개발 도구야. 단, Mac에서만 사용할 수 있어.

Mac 앱 스토어에서 Xcode를 검색해서 설치하면 돼. 크기가 좀 크니까 시간이 걸릴 수 있어. 인내심을 가지고 기다려봐! 😅

5. 에디터 설치하기

코드를 편집할 에디터도 필요해. 많은 개발자들이 Visual Studio Code(VS Code)를 사용해. 무료이면서 기능도 많고 사용하기 편리하거든.

VS Code 공식 웹사이트(https://code.visualstudio.com/)에서 다운로드받아 설치하면 돼.

🔧 개발자 꿀팁: VS Code에 'React Native Tools' 확장 프로그램을 설치하면 리액트 네이티브 개발이 더 쉬워져!

6. Git 설치하기

마지막으로 Git을 설치해야 해. Git은 버전 관리 시스템으로, 코드의 변경 사항을 추적하고 관리하는 데 사용돼. 협업할 때 특히 유용하지!

Git 공식 웹사이트(https://git-scm.com/)에서 다운로드받아 설치하면 돼.

자, 이제 모든 준비가 끝났어! 위의 체크리스트를 보면서 하나하나 확인해봐. 다 설치했다면 이제 진짜 개발을 시작할 준비가 된 거야. 어때, 설레지 않아? 😄

다음 섹션에서는 드디어 우리의 채팅 앱 프로젝트를 시작해볼 거야. 기대되지? 그럼 다음으로 고고! 🚀

3. 리액트 네이티브 프로젝트 시작하기 🎬

자, 이제 진짜 시작이야! 우리의 채팅 앱을 만들기 위한 첫 걸음을 떼볼 거야. 어떻게 하냐고? 리액트 네이티브 프로젝트를 생성하면 돼. 걱정 마, 생각보다 훨씬 쉬워!

1. 프로젝트 생성하기

먼저 터미널을 열고, 프로젝트를 만들고 싶은 디렉토리로 이동해. 그리고 다음 명령어를 입력해봐:

npx react-native init ChatApp

여기서 'ChatApp'은 우리 프로젝트의 이름이야. 마음에 드는 다른 이름으로 바꿔도 돼. 예를 들어 'SuperCoolChatApp'이라고 하고 싶다면:

npx react-native init SuperCoolChatApp

이렇게 하면 돼. 근데 이름에 공백은 넣지 마! 그리고 첫 글자는 대문자로 쓰는 게 좋아.

🎈 재미있는 사실: 'npx'는 'Node Package Execute'의 약자야. npm 5.2.0 버전부터 기본으로 포함된 도구로, 패키지를 설치하지 않고도 실행할 수 있게 해줘. 편리하지?

이 명령어를 실행하면 리액트 네이티브가 열심히 일해서 프로젝트에 필요한 모든 파일과 폴더를 만들어줄 거야. 조금 시간이 걸릴 수 있으니 참을성 있게 기다려봐. 그동안 커피 한 잔 마시는 건 어때? ☕

2. 프로젝트 구조 살펴보기

프로젝트 생성이 끝나면, 만들어진 폴더로 이동해볼까? 터미널에서 다음 명령어를 입력해:

cd ChatApp

그리고 VS Code로 이 폴더를 열어봐. 와, 많은 파일들이 보이지? 놀라지 마, 하나씩 살펴볼 테니까.

App.js: 이게 우리 앱의 메인 컴포넌트야. 앱의 첫 화면을 여기서 만들 거야.
index.js: 앱의 진입점이야. App.js를 불러와서 실행하는 역할을 해.
package.json: 프로젝트의 정보와 의존성(사용하는 라이브러리들)을 관리하는 파일이야.
android/ 폴더: 안드로이드 관련 설정 파일들이 있어.
ios/ 폴더: iOS 관련 설정 파일들이 있어.

이 외에도 많은 파일들이 있지만, 지금은 이 정도만 알아도 충분해!

3. 앱 실행해보기

자, 이제 우리가 만든 앱을 실행해볼 차례야. 안드로이드와 iOS 중 어떤 걸로 시작할래?

안드로이드로 시작하고 싶다면:

npx react-native run-android

iOS로 시작하고 싶다면 (Mac에서만 가능해):

npx react-native run-ios

이 명령어를 실행하면 앱이 빌드되고 시뮬레이터(또는 연결된 실제 기기)에서 실행될 거야. 첫 빌드는 시간이 좀 걸릴 수 있어. 다시 한 번 인내심을 발휘해봐! 🧘‍♂️

🚀 개발자 꿀팁: 실제 기기에서 테스트하고 싶다면, 안드로이드 폰은 USB 디버깅을 활성화하고, iOS 기기는 Xcode에서 개발자 계정을 설정해야 해. 실제 기기에서 테스트하면 더 정확한 사용자 경험을 확인할 수 있어!

4. 'Hello, World!' 수정하기

앱이 성공적으로 실행됐다면, 화면에 "Welcome to React Native!"라는 메시지가 보일 거야. 이걸 우리만의 메시지로 바꿔볼까?

VS Code에서 App.js 파일을 열고, 다음 부분을 찾아봐:


<Text style={styles.sectionTitle}>Welcome to React Native!</Text>

이 부분을 이렇게 바꿔볼까?


<Text style={styles.sectionTitle}>안녕, 채팅 앱 세상!</Text>

파일을 저장하고 앱을 다시 보면... 짜잔! 🎉 메시지가 바뀐 걸 확인할 수 있을 거야.

위 그림은 우리가 만든 리액트 네이티브 앱의 기본 구조를 보여줘. App.js가 메인 컴포넌트고, android/와 ios/ 폴더에는 각 플랫폼별 설정이 들어있어. 그리고 이 모든 것을 index.js가 묶어주는 거지!

어때? 생각보다 어렵지 않지? 이제 우리는 리액트 네이티브 프로젝트를 만들고, 실행하고, 심지어 수정까지 해봤어! 🎊

다음 섹션에서는 우리의 채팅 앱에 필요한 기본적인 UI 컴포넌트들을 만들어볼 거야. 재미있을 거야, 약속해! 😉 준비됐어? 그럼 다음으로 고고! 🚀

4. 채팅 앱 UI 구성하기 🎨

자, 이제 우리 채팅 앱의 얼굴을 만들 시간이야! UI(User Interface)는 사용자가 앱과 상호작용하는 방식을 결정하는 중요한 요소지. 예쁘고 사용하기 편한 UI를 만들면 사용자들이 우리 앱을 더 좋아할 거야. 😍

1. 기본 구조 만들기

먼저 App.js 파일을 열고, 기본 구조를 만들어볼까? 다음과 같이 코드를 수정해봐:


import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>슈퍼 쿨 채팅</Text>
      </View>
      <View style={styles.chatArea}>
        <Text>여기에 채팅 메시지가 표시될 거예요!</Text>
      </View>
      <View style={styles.inputArea}>
        <Text>여기에 입력 필드가 들어갈 거예요!</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    height: 60,
    backgroundColor: '#075E54',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: '#FFFFFF',
    fontSize: 20,
    fontWeight: 'bold',
  },  chatArea: {
    flex: 1,
    padding: 10,
  },
  inputArea: {
    height: 60,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

이 코드는 우리 앱의 기본 구조를 만들어줘. 헤더, 채팅 영역, 입력 영역으로 나눠져 있지. 각 부분을 하나씩 살펴볼까?

💡 리액트 네이티브 팁: StyleSheet.create를 사용하면 스타일을 한 곳에서 관리할 수 있어서 편리해. 게다가 성능도 좋아진다고!

2. 채팅 메시지 컴포넌트 만들기

이제 채팅 메시지를 표시할 컴포넌트를 만들어볼 거야. 새 파일을 만들고 'ChatMessage.js'라고 이름 지어줘. 그리고 다음 코드를 입력해:


import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ChatMessage = ({ message, isMe }) => {
  return (
    <View style={[
      styles.messageContainer,
      isMe ? styles.myMessage : styles.otherMessage
    ]}>
      <Text style={styles.messageText}>{message}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  messageContainer: {
    maxWidth: '80%',
    padding: 10,
    borderRadius: 10,
    marginBottom: 10,
  },
  myMessage: {
    alignSelf: 'flex-end',
    backgroundColor: '#DCF8C6',
  },
  otherMessage: {
    alignSelf: 'flex-start',
    backgroundColor: '#FFFFFF',
  },
  messageText: {
    fontSize: 16,
  },
});

export default ChatMessage;

이 컴포넌트는 채팅 메시지 하나를 표시해. isMe prop을 통해 내 메시지인지 상대방 메시지인지 구분할 수 있어.

3. 입력 필드 컴포넌트 만들기

다음으로 메시지를 입력할 수 있는 컴포넌트를 만들자. 'ChatInput.js'라는 새 파일을 만들고 다음 코드를 입력해:


import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const ChatInput = ({ onSend }) => {
  const [message, setMessage] = useState('');

  const handleSend = () => {
    if (message.trim()) {
      onSend(message);
      setMessage('');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={message}
        onChangeText={setMessage}
        placeholder="메시지를 입력하세요..."
      />
      <TouchableOpacity onPress={handleSend} style={styles.sendButton}>
        <Icon name="send" size={20} color="#075E54" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 10,
    backgroundColor: '#FFFFFF',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#DDDDDD',
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 5,
    marginRight: 10,
  },
  sendButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#ECE5DD',
  },
});

export default ChatInput;

이 컴포넌트는 텍스트 입력 필드와 전송 버튼을 포함하고 있어. 사용자가 메시지를 입력하고 전송할 수 있게 해주지.

📱 모바일 UI 팁: 모바일에서는 터치 영역이 충분히 커야 해. 그래서 전송 버튼의 크기를 40x40으로 설정했어. 손가락으로 쉽게 누를 수 있는 크기지!

4. 메인 App 컴포넌트 업데이트하기

이제 우리가 만든 컴포넌트들을 조합해서 완성된 UI를 만들어볼 거야. App.js 파일을 다음과 같이 수정해:


import React, { useState } from 'react';
import { View, FlatList, StyleSheet, SafeAreaView } from 'react-native';
import ChatMessage from './ChatMessage';
import ChatInput from './ChatInput';

const App = () => {
  const [messages, setMessages] = useState([]);

  const handleSend = (message) => {
    setMessages([...messages, { id: Date.now(), text: message, isMe: true }]);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.chatArea}>
        <FlatList
          data={messages}
          renderItem={({ item }) => <ChatMessage message={item.text} isMe={item.isMe} />}
          keyExtractor={item => item.id.toString()}
          inverted
        />
      </View>
      <ChatInput onSend={handleSend} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  chatArea: {
    flex: 1,
    padding: 10,
  },
});

export default App;

이렇게 하면 기본적인 채팅 UI가 완성돼! 메시지를 입력하고 전송할 수 있고, 전송한 메시지가 화면에 표시될 거야.

위 그림은 우리가 만든 채팅 앱 UI의 구조를 보여줘. 상단의 헤더, 중앙의 채팅 영역, 그리고 하단의 입력 영역으로 구성되어 있지. 멋지지 않아? 😎

이제 기본적인 UI는 완성됐어! 다음 단계에서는 실제로 메시지를 주고받을 수 있게 서버와 연결하는 작업을 할 거야. 준비됐어? 그럼 다음으로 고고! 🚀

5. 실시간 통신 구현하기 🌐

자, 이제 우리 채팅 앱의 심장을 만들 차례야! 실시간으로 메시지를 주고받을 수 있게 해주는 부분이지. 이를 위해 우리는 Socket.IO라는 라이브러리를 사용할 거야. Socket.IO는 실시간 양방향 통신을 쉽게 구현할 수 있게 해주는 강력한 도구야.

1. Socket.IO 설치하기

먼저 터미널에서 다음 명령어를 실행해 Socket.IO 클라이언트를 설치해줘:

npm install socket.io-client

2. 소켓 연결 설정하기

이제 App.js 파일에 Socket.IO를 import하고 연결을 설정해볼게. 파일 상단에 다음 줄을 추가해:

import io from 'socket.io-client';

그리고 App 컴포넌트 내부에 다음 코드를 추가해:


const [socket, setSocket] = useState(null);

useEffect(() => {
  const newSocket = io('http://여기에_서버_주소를_입력하세요');
  setSocket(newSocket);

  return () => newSocket.close();
}, []);

이 코드는 앱이 시작될 때 서버와 소켓 연결을 생성하고, 앱이 종료될 때 연결을 닫아줘.

🔒 보안 팁: 실제 앱에서는 'https'를 사용해야 해. 'http'는 테스트용으로만 사용하고, 배포할 때는 반드시 'https'로 바꿔줘!

3. 메시지 송수신 구현하기

이제 실제로 메시지를 주고받는 기능을 구현해볼 거야. handleSend 함수를 다음과 같이 수정해:


const handleSend = (message) => {
  if (socket) {
    socket.emit('chat message', { text: message, isMe: true });
    setMessages(prevMessages => [...prevMessages, { id: Date.now(), text: message, isMe: true }]);
  }
};

그리고 useEffect 훅 안에 다음 코드를 추가해:


useEffect(() => {
  if (socket) {
    socket.on('chat message', msg => {
      setMessages(prevMessages => [...prevMessages, { id: Date.now(), ...msg, isMe: false }]);
    });
  }
}, [socket]);

이 코드는 서버로부터 메시지를 받으면 그것을 메시지 목록에 추가해줘.

4. 서버 측 코드

물론 실시간 통신을 위해서는 서버도 필요해. 서버 측 코드는 Node.js와 Express, Socket.IO를 사용해 다음과 같이 구현할 수 있어:


const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

http.listen(3000, () => {
  console.log('Server is running on port 3000');
});

이 서버는 클라이언트로부터 메시지를 받으면 연결된 모든 클라이언트에게 그 메시지를 브로드캐스트해.

위 그림은 Socket.IO를 이용한 실시간 통신의 구조를 보여줘. 클라이언트들이 서버와 양방향으로 통신하면서 실시간으로 메시지를 주고받는 모습이야.

자, 이제 우리의 채팅 앱이 실시간으로 동작할 수 있게 됐어! 🎉 메시지를 보내면 서버를 통해 다른 사용자에게 즉시 전달되고, 다른 사용자가 보낸 메시지도 실시간으로 받아볼 수 있지.

다음 단계에서는 사용자 인증과 채팅방 기능을 추가해볼 거야. 더 멋진 채팅 앱으로 발전시켜 나가자고! 준비됐어? 그럼 다음으로 고고! 🚀

6. 사용자 인증 구현하기 🔐

채팅 앱에서 사용자 인증은 정말 중요해. 누가 메시지를 보냈는지 알 수 있고, 개인정보도 보호할 수 있거든. 이번에는 간단한 사용자 인증 시스템을 구현해볼 거야.

1. 로그인 화면 만들기

먼저 'Login.js'라는 새 파일을 만들고 다음 코드를 입력해:


import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const Login = ({ onLogin }) => {
  const [username, setUsername] = useState('');

  const handleLogin = () => {
    if (username.trim()) {
      onLogin(username);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={username}
        onChangeText={setUsername}
        placeholder="사용자 이름을 입력하세요"
      />
      <Button title="로그인" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginBottom: 20,
    borderRadius: 5,
  },
});

export default Login;

2. App.js 수정하기

이제 App.js를 수정해서 로그인 기능을 추가해볼게. App.js를 다음과 같이 수정해:


import React, { useState, useEffect } from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import io from 'socket.io-client';
import Login from './Login';
import ChatRoom from './ChatRoom';

const App = () => {
  const [user, setUser] = useState(null);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io('http://여기에_서버_주소를_입력하세요');
    setSocket(newSocket);

    return () => newSocket.close();
  }, []);

  const handleLogin = (username) => {
    setUser({ username });
    if (socket) {
      socket.emit('login', { username });
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {user ? (
        <ChatRoom user={user} socket={socket} />
      ) : (
        <Login onLogin={handleLogin} />
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
});

export default App;

3. 채팅방 컴포넌트 만들기

'ChatRoom.js' 파일을 만들고 다음 코드를 입력해:


import React, { useState, useEffect } from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import ChatMessage from './ChatMessage';
import ChatInput from './ChatInput';

const ChatRoom = ({ user, socket }) => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (socket) {
      socket.on('chat message', msg => {
        setMessages(prevMessages => [...prevMessages, { id: Date.now(), ...msg }]);
      });
    }
  }, [socket]);

  const handleSend = (message) => {
    if (socket) {
      const messageData = { text: message, user: user.username };
      socket.emit('chat message', messageData);
      setMessages(prevMessages => [...prevMessages, { id: Date.now(), ...messageData, isMe: true }]);
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={messages}
        renderItem={({ item }) => <ChatMessage message={item.text} isMe={item.isMe} user={item.user} />}
        keyExtractor={item => item.id.toString()}
        inverted
      />
      <ChatInput onSend={handleSend} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ChatRoom;

4. 서버 측 코드 수정하기

서버 측 코드도 사용자 인증을 지원하도록 수정해야 해. 다음과 같이 변경해봐:


const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

const users = new Map();

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('login', ({ username }) => {
    users.set(socket.id, username);
    console.log(`${username} logged in`);
  });

  socket.on('chat message', (msg) => {
    const username = users.get(socket.id);
    io.emit('chat message', { ...msg, user: username });
  });

  socket.on('disconnect', () => {
    const username = users.get(socket.id);
    users.delete(socket.id);
    console.log(`${username} disconnected`);
  });
});

http.listen(3000, () => {
  console.log('Server is running on port 3000');
});