🔔 53. React Native Toast 메시지 & 피드백 처리 전략 — 사용자 알림 UX 정리

---

모바일 앱을 사용하다 보면
"로그인이 완료되었습니다"
"저장이 실패했습니다"
"인터넷 연결을 확인하세요"
같은 메시지를 자연스럽게 받아보게 된다.

이런 메시지는 단순한 알림을 넘어서
사용자 피드백(Feedback)의 핵심 요소다.

이번 글은 React Native에서 사용자에게 메시지를 보여주는 방법들과
그에 따른 UX 설계 전략을 정리한 글이다.

---

✅ 기본 Toast 구현 방식 2가지

방식	설명
플랫폼 Toast	Android의 Toast API 사용
커스텀 Toast	react-native-toast-message 등 외부 라이브러리 사용

---

📦 react-native-toast-message 설치 및 사용

npm install react-native-toast-message

🔧 기본 설정 (App.tsx)

import Toast from 'react-native-toast-message';

export default function App() {
  return (
    <>
      <YourNavigation />
      <Toast />
    </>
  );
}

🔧 사용 예시

Toast.show({
  type: 'success',
  text1: '🎉 저장 완료',
  text2: '입력한 정보가 정상적으로 저장되었어요',
});

---

💬 커스텀 토스트 타입 정의

Toast.show({
  type: 'error',
  text1: '❌ 요청 실패',
  text2: '서버 오류가 발생했어요. 다시 시도해주세요.',
  position: 'bottom',
});

• type: success / error / info / custom
• position: top / bottom
• autoHide: false로 고정 유지 가능

---

⚙️ 상태 기반 피드백 처리 예시

const handleSubmit = async () => {
  try {
    await submitForm();
    Toast.show({
      type: 'success',
      text1: '전송 완료',
    });
  } catch (err) {
    Toast.show({
      type: 'error',
      text1: '전송 실패',
      text2: err.message,
    });
  }
};

✅ 성공/실패 시 각각 다른 메시지 출력
✅ 오류 메시지는 서버에서 받은 내용 그대로 출력 가능

---

💡 UX 설계 팁

항목	전략
중복 토스트 방지	Toast.show 전에 기존 토스트 dismiss 처리
글로벌 메시지 처리	전역 에러 핸들러 또는 상태에 따라 처리
터치 불가 영역	Toast는 화면 맨 위/아래 배치로 UX 침해 최소화
애니메이션 효과	슬라이드, 페이드 등 적절히 설정 가능

---

🧠 커스텀 방식 고려할 때

• 상태관리를 통해 전역 메시지 상태(toastMessage) 관리 가능
• 디자인 팀 요구사항에 맞게 완전한 커스터마이징 가능
• 토스트 외에도 Snackbar, Modal 알림 형태와 통합 설계할 수 있음

---

📝 내가 느낀 점

Toast는 사소한 기능 같지만
유저가 앱과 소통하는 가장 중요한 접점이라는 걸 알게 됐다.
지금은 상태 처리 흐름에서 토스트 알림까지 포함해
UX 흐름이 끊기지 않도록 설계하고 있다.

---

🔔 “앱은 말을 할 수 없다. 대신 Toast가 말해준다.”

---