npm start를 하고나서 리스트관련 페이지로 이동 시, 렌더링이 이루어지지 않는 현상이 있었습니다. 그 이유는 sessionStorage에 있는 토큰 값을 받아온 이후에 그 토큰값을 바탕으로 백엔드로 요청을 보내야 하는데 토큰값을 가져오기 전에 요청을 보냈기 때문에 렌더링이 이루어지지 않는 것이었습니다.
따라서 이 문제를 해결하려면, 토큰을 우선 받아오고 난 이후에 백엔드로 요청을 보내야했습니다.
이 문제를 해결하기 위해 커스텀 훅을 작성했는데요, 코드는 다음과 같습니다.
import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { baseurl } from '../../utils/index';
const authurl = `${baseurl}/auth/local`;
const useFetch = (url) => {
const [data, setData] = useState([]);
const getToken = async () => {
const token = window.sessionStorage.getItem('token');
if(token === null || token === undefined){
const response = await axios.post(authurl, {
identifier: 'test',
password: 'test1',
});
window.sessionStorage.setItem('token',response.data.jwt);
return response.data.jwt;
}
return token;
}
const loadData = () => {
const config = {
method: "get",
// eslint-disable-next-line camelcase
url: url,
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
"Content-Type": "application/json",
},
};
axios(config).then((res) => setData(res.data));
}
useEffect(() => {
getToken().then(() => loadData());
}, []);
return data;
}
export default useFetch;
이 문제를 해결하기 위해 순서를 어떻게 보장해줄 것인가에 대한 고민을 했습니다. 따라서 순서를 보장하기 위해 .then을 통해 앞에서의 프로미스가 성공적으로 이행이 되었을 때 백엔드에 요청을 보내면 될 것 같다고 생각이 들었습니다.
getToken() 함수의 반환값이 프로미스 객체이기 때문에 .then을 사용해서 그 안에서 loadData함수를 호출했습니다. 이렇게 하게 되면 토큰을 받아왔을 때에만 loadData를 통해서 백엔드로 요청을 보내기 때문에 렌더링이 일어나지 않는 오류를 해결할 수 있었습니다.