페이지 성능 최적화 recoil

진행하고 있는 프로젝트에 배포가 끝나서 들어가보면서 user 입장에서 사용할 때 괜찮은지를 확인해보고 있다. 다른 페이지들도 성능이 좋은 건 아니지만 단순 Read인데 데이터를 불러오는 것이 상당히 느려서 이에 대한 최적화를 진행하기 위해 atom 기반으로 상태관리를 진행해보려 한다. 사실 다른 페이지에서 데이터를 불러오기 위해서 atom을 사용하고 있다. 이 페이지에서는 왜 안썼는지 모르겠지만 적용을 해보겠다. 

 

const idState = atom({
  key: 'idState',
  default: '',
  effects_UNSTABLE: [persistAtom],
});

id를 저장할 곳은 이미 코드에서 선언을 해놓았었다. 

 

<a href={`/information/${notice._id}`}>{notice.title}</a>

원래는 라우팅을 위와 같이 했었다. 하지만, 이렇게 해두면 onClick이 되었을 때 id를 useState로 세팅할 수 없기 때문에, router.push로 바꿔보겠다. 

 

onClick = {() => {
    setidstate(notice._id);
    router.push({
      pathname: "/information/[id]",
      query: {id: notice._id}
    })
  }}

이렇게 바꿔주고 notice._id를 넘겨 주었다. 사실 이렇게만 해주고 id를 받아주는 곳에서 아무것도 안 했는데, 조금 빨라 보였다. 개인적인 생각이지만 router.push로 인자값을 넘기는게 더 빠른 것 같다. 

 

이렇게 설정해놓고 원래는 url에서 인자값을 잡아서 API로 보내던 코드를 recoil에 저장되어 있던 값을 가져와서 API에 던지는 식으로 변경해 주었다. 결과는 이전 코드보다 훨씬 빠르게 데이터를 불러올 수 있었다.