[React] 순서를 보장해서 데이터 렌더링 시키기

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를 통해서 백엔드로 요청을 보내기 때문에 렌더링이 일어나지 않는 오류를 해결할 수 있었습니다.