[React][TypsScript] axios 첫 렌더링시 localhost Token값이 null인 이유?



export const customAxios = axios.create({
  baseURL: "http://myURL",
  headers: {
    Authorization: `Bearer ${localStorage.getItem("userToken")}`,
  },
});

첫 렌더링 시에 헤더가 적용되지 않는 이유는, customAxios 객체가 생성될 때 localStorage에서 값을 가져오기 때문이다.
React 컴포넌트의 렌더링이 시작되면, customAxios 객체가 먼저 생성되고, 그 후에 localStorage에서 값을 가져옵니다.

 

이렇게 되면, 첫 렌더링 시에는 localStorage에서 값을 가져올 수 없기 때문에, customAxios 객체의 헤더에도 null 값이 설정되게 된다.

 

이 문제를 해결하기 위해서는, customAxios 객체가 생성될 때 헤더에 null 값이 설정되는 것을 방지해야 한다.

이를 위해서는 객체의 header를 업데이트 해줘야한다.

나는 최초에 토큰 값을 받는 곳에 아래 코드와 같이 변경해주었다.

customHeaderAxios.defaults.headers.Authorization = `Bearer ${response.token}`;