TIL 76 (개인 프로젝트 진행 상황과 React-router-dom v6 useNavigate, useLocation, useHistory)

지난 주는 면접 일정이 잡히면서 면접 준비하고 서울도 갔다오고, 개인적인 볼 일로 조금 바쁘게 지냈습니다. 이번 주부터는 데이터베이스나 네트워크 학습 내용이나 개인 프로젝트 하면서 맞이하는 에러들을 열심히 올려보도록 하겠습니다.

 

현재 The Menu 개인프로젝트는 서버 1차 완성하고 클라이언트 진행 중에 있습니다. css보단 기능적인 부분 완성을 우선으로 하고 있으며, 회원가입, 로그인, 메뉴 설문은 1차 완성 후 다음 작업으로 카카오 지도와 로그인 그리고 메뉴 데이터 생성 중에 고민하고 있습니다.

 

이번에 react-router-dom을 오랜만에 사용하면서 v6로 업데이트된 부분을 학습하면서 구현했습니다. 사실 섹션 3 ha 이후에 클라이언트 부분은 팀원들과 같이 오류 해결할 때말고는 클라이언트를 자세하게 들여다볼 일이 크게 없어서 처음부터 다시 복습했었습니다.

 

먼저 navigate 입니다.

앞선 v5에서는 useHistory를 사용해서 history.push나 history.back을 구현했습니다. 근데 v6로 바뀌면서 이제는 useNavigate를 사용해야 합니다.

 

개인프로젝트 일부 코드입니다.

// surveyPage 일부

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

...중략...

    // axios({
    //   method: 'GET',
    //   url: `http://localhost:4000/menu?${query}`
    // })
    // .then((result) => {
      navigate('/result', { state : query });
    // })

survey에서 원하는 메뉴 종류를 선택하면 axios 요청 후 result화면으로 넘어갑니다. navigate('path', state로 넘길 데이터) 작성해서 response 데이터를 result page로 넘겼습니다.

// resultPage
import { useLocation } from 'react-router-dom';

export default function ResultPage () {
  const { state } = useLocation();

  return (
    <>
      <div>{ state }</div>
    </>
  );
}

result페이지에서는 useLocation을 사용합니다. 5번째 줄처럼 useLocation을 통해서 useNavigate에서 보낸 데이터를 받습니다. 현재는 메뉴 데이터도 없고, 아직 result 페이지에 대한 고민을 하고 있는 중입니다.

 

클라이언트를 구현하면서 버전 업데이트로 변경된 부분을 학습하면 또 블로그에 올리도록 하겠습니다.