유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Build a Full Stack Chat App using Socket.io & Expo Router #12 - Conversation UI

Code With Nomi

2025. 9. 2.

0

#mobile app
#frontend
  • 대화 UI 구현을 위해 useRoute 훅에서 대화 ID, 이름, 참여자, 아바타, 유형 데이터를 가져옴 🧑‍💻
  • JSON 문자열로 저장된 참여자 데이터를 파싱하여 배열 형태로 변환 ⚙️
  • 직접 대화와 그룹 대화에 따라 다른 아바타와 이름을 설정 🖼️
  • 키보드 가림 문제를 해결하기 위해 KeyboardAvoidingView 컴포넌트 사용 ⌨️
  • 헤더 컴포넌트를 사용하여 뒤로 가기 버튼, 아바타, 대화 이름 표시 🔙
  • FlatList 컴포넌트를 사용하여 메시지 목록을 역순으로 렌더링 📃
  • 메시지 아이템 컴포넌트를 생성하여 메시지 UI 구현 💬
  • 내 메시지와 상대방 메시지를 구분하여 스타일 적용 🎨
  • 그룹 대화에서만 사용자 아바타와 이름 표시 👥
  • 메시지 입력 컴포넌트를 추가하여 메시지 전송 기능 구현 📤
  • 이미지 선택 기능을 구현하여 이미지 메시지 전송 가능 🏞️

Recommanded Videos