작은 시작점

'주문하기' 페이지에서 사용자가 주문정보를 모두 입력하고 '주문하기'를 누르면! 서버로 주문자의 정보가 넘어간다.

이후 나오는 페이지는 '주문완료' 페이지'에는 주문자정보 + 주문번호, 결제만료일 등의 추가 정보가 필요하다.

서버에서 받은 데이터들을 완료페이지에 뿌려주어야하는 것이다.

그냥 뿌려주는 것이 아니라 받은 데이터를 다음페이지로 가지고 가서 뿌려주어야했다. 

useNavigate, useLocation를 활용해서 데이터를 전달했다. 그리고 생각보다 간단했다.. 

1. POST 메서드를 통해 비동기 방식으로 서버에 데이터 전달

먼저 주문자가 입력한 정보들을 서버에 전송해야 한다.

Axios를 사용하여 비동기적 방식으로 서버에 POST 요청을 보내고, 응답을 기다린다.

/orders/ 엔드포인트로 formData를 전송하고, 서버의 응답에 따라 다른 처리를 하도록 한다.

서버의 응답이 존재한다면, 응답 데이터는 responseData에 저장되고,

navigate함수를 통해 /orderSuccess 페이지로 이동한다.

아래 코드는 Axios를 사용하여 HTTP 요청을 생성하는 함수를 정의한 것이다.

axios.create() 메서드를 사용하여 Axios 인스턴스를 생성하고, 이를 통해 기본 URL과 헤더를 설정한다.

1. baseURL: 'https://www.petinuniverse.com/',: Axios 인스턴스의 기본 URL을 설정한다. 이 기본 URL은 나중에 이 인스턴스를 사용하여 보낼 모든 요청의 기본 주소가 되는 것이다.
2. headers: { 'Content-Type': 'application/json', }: Axios 인스턴스의 기본 헤더를 설정합니다. 여기서는 요청의 컨텐츠 타입을 JSON으로 설정한다.

이렇게 설정된 Axios 인스턴스는 APIClient 함수를 호출함으로써 반환된다.

APIClient 함수를 한번 정의해두면 기본 URL 및 헤더를 가진 일관된 설정을 유지하면서 여러 요청을 쉽게 수행할 수 있어 간편하다.

2. useNavigate 훅을 사용해 응답 데이터와 함께  페이지 이동

위의 코드에서 서버로 보낸 응답이 존재할 때, 응답데이터를 responseData에 담는 것을 보았다.

responseData에는 주문완료 페이지에 뿌려줄 데이터들이 담겨있다. 이 변수를 가지고 다음페이지에 넘어가야한다.

useNavigate는 React Router에서 제공하는 훅으로,
함수형 컴포넌트 내에서 프로그래밍 방식으로 다른 경로로 이동할 수 있게 해주는 역할을 합니다.

사용법은 간단하다.

1. navigate 함수를 사용하기 전 useNavigate 훅을 사용하여 navigate 함수를 얻어온다.

2. navigate 함수 사용

• 첫 번째 인자 ('/orderSuccess'): 이동하고자 하는 경로를 나타낸다. 페이지가 /orderSuccess로 이동하게 된다.
• 두 번째 인자 ({ state: { responseData } }): 옵션 객체로, 이동할 때 함께 전달하고 싶은 데이터를 설정한다. 대표적으로 state라는 키를 사용한다.

이렇게 설정하면 /orderSuccess로 이동할 때 { responseData }라는 데이터가 함께 전달되며,

이 데이터는 이동한 페이지에서 location.state를 통해 접근할 수 있게 된다.

3. 이동한 페이지에서 useLocation으로 데이터에 접근하기

자 이제 서버의 응답도 받았고, 응답데이터와 함께 페이지 이동까지 완료했다.

이제 이동된 페이지인 orderSuccess에 응답데이터를 뿌려주어 주문완료 페이지를 완성하면 된다.

useLocation은 React Router 라이브러리에서 제공하는 훅으로
현재 애플리케이션의 경로(location) 정보를 가져올 때 사용된다.

이 훅을 사용하면 현재 URL과 그와 관련된 정보에 접근할 수 있습니다.

• location.pathname: 현재 경로에 대한 문자열을 반환
• location.search: 현재 쿼리 파라미터에 대한 문자열을 반환
• location.state: navigate 함수를 통해 전달된 상태(state)에 대한 정보가 담겨 있다.

우리의 위의 3개 중 location.state를 활용해 navigate함수를 통해 전달된 상태인 responseData를 얻으면 된다!

1. useNavigate와 마찬가지로 useLocation 훅을 사용하여 현재 경로의 정보를 가져온다.

2.  그 정보 중에서 state 속성을 사용하여 데이터를 추출

Optional Chaining (?.)을 사용하여 location.state가 정의되어 있을 때에만 responseData를 추출하고, 그렇지 않으면 빈 객체로 설정한다. 

3. 추출한 데이터 화면에 렌더링하기

위와 같이 페이지에서 전달받은 responseData의 속성들을 사용하여 사용자에게 필요한 정보를 표시하는데 활용하면, 끝!