localStorage.getItem()을 상수로 빼서 사용하면 동작하지 않는 이유

localStorage.getItem()을 여러 페이지에서 사용하고 있었다. 중복되는 코드를 제거하기 위해 리팩터링을 하고 있었기 때문에 localStorage.getItem() 또한 상수로 빼서 관리를 하려고 했었다. 그럼 따로 정의해 둔 변수명을 사용하여 localStorage의 값을 가져오면 되니깐 엄청 편하겠다!라고 생각했던 것이다.

---

결론적으로 제목과 같이 localStorage.getItem()을 상수로 빼서 사용하면 안 된다. 

 

첫 번째 이유는 값을 가져올 수 없기 때문이다.

아래 코드에서 console.log(access_token) 값은 null이 되는 것을 확인할 수 있다. 이를 해결하기 위해서는 window.localStorage.getItem()을 사용하면 원하는 값을 가져올 수 있다. 하지만 권장하지 않는다. 그 이유는 밑에서 설명하겠다. 

const URL = '임의 url'
const access_token = localStorage.getItem('access_token');

export {URL, access_token};

import { URL, access_token } from '../static/constants';

const createTodoApi = (todo) => {
  console.log(access_token);

  return fetch(`${URL}/todos`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${access_token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      todo,
    }),
  });
};

export default createTodoApi;

 

두 번째 이유는 속도 때문이다.

localStorage를 사용하는 그 자체가 매우 무거운 작업이다. 

 

아래 예제를 보면 알 수 있듯이 일반적인 변수를 사용할 때보다 localStorage에서 가져온 value를 사용하는 것이 훨씬 속도가 느린 것을 확인할 수 있다. 단순 10000번을 반복했을 뿐인데 이러한 결과를 가져왔다. 나중에 더 크고 더 많은 동작을 할 텐데 그때마다 localStorage에서 값을 가져온다면 아마 서버는 터질 것이다. 

예제 코드

 

 

마무리

---

localStorage는 set과 get 하는 과정이 쉽기 때문에 유용하게 사용할 수 있는 놈인 줄 알았지만, 그 작업은 매우 무거운 작업이기 때문에 함부로 사용해서는 안된다는 생각이 들었다!

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖

반응형