230922 개발일지 TIL - React와 Firebase를 이용한 사용자별 라우팅 구현

React와 Firebase를 이용한 사용자별 라우팅 구현
(React와 Firebase를 이용하여 사용자별로 다른 페이지를 보여주는 방법)

Firebase의 Authentication 서비스는 로그인한 사용자마다 고유한 uid를 제공해준다. 이 uid 값을 활용하면 사용자별 라우팅을 쉽게 구현할 수 있다.

예를 들어, '저장하기' 버튼이 클릭되면 현재 로그인된 사용자의 uid에 해당하는 페이지로 네비게이션하고 싶다면 아래와 같이 코드를 작성할 수 있다.

// "저장하기" 버튼 클릭 시 실행되는 함수
const handleAddButtonClick = async (e) => {
  // 저장 완료 알림 후 어드민 페이지로 이동
  alert('저장 완료!');
  navigate(`/admin/${userUid}`);
};

위 코드에서 navigate 함수는 react-router-dom에서 제공하는 Hook이다. /admin/${userUid} 경로로 네비게이션하면, userUid 값에 따라 다른 페이지가 표시된다.

마찬가지 방법으로 '수정하기', '삭제하기' 등의 기능도 구현할 수 있다.

// "수정하기" 버튼 클릭 시 실행되는 함수
const handleEditButtonClick = async (e) => {

  // 수정 완료 알림 후 어드민 페이지로 이동
  alert('수정 완료!');
  navigate(`/admin/${userUid}`);
};

// "삭제하기" 버튼 클릭 시 실행되는 함수
const handleRemoveButtonClick = async (id) => {

  alert('삭제 완료!');
  
  navigate(`/admin/${userUid}`);
};

위와 같이 작성하면 현재 로그인된 사용자의 admin 페이지로 이동하게 된다.