불필요한 api 호출을 단축시켜 성능 개선하기

현재 내가 하고 있는 프로젝트는 기능 구현에 초점을 맞추어 진행되다 보니

불필요한 api 호출, 리렌더링이 너무 많이 일어나는 상황이었다.

이것들을 최대한 줄여보고자 코드 개선 작업을 하는 중인데 (제대로 하고 있는건지 모르겠으나...)

가장 최근에 한 작업을 기록해보려고 한다.

 

수정한 페이지 상황

3개의 게시판 페이지가 있는데 각각의 게시판에 접속하면 api를 호출해서 해당 게시판의 데이터를 가져온다.

그리고 그 데이터는  게시판 리스트, 게시글 조회, 게시글 작성(수정) 페이지에서 모두 사용된다.

 

수정 전 

각 게시판의 리스트, 글조회, 글작성(수정) 페이지에 접속할 때마다 

게시판 정보 api를 호출해서 불러온 데이터를 새로운 state에 넣어주고 있었다.

하지만 같은 게시판안의 모든 페이지는 같은 데이터를 공유하기 때문에

처음 게시판 리스트에 접속할 때 1번만 api를 호출해주면 되는 상황이었다.

 

첫번째 수정 - 페이지를 이동할 때, props로 state를 전달

1. 각 게시판 리스트에 처음 접속하면 게시판 정보 api를 호출하고, 그 데이터를 state에 넣어준다.

2. 리스트 / 조회 / 작성(수정) 페이지 간 이동할 때마다 Link나 history.push로 props 데이터를 넣어 state를 전달해준다.

 

첫번째 수정안의 문제점

이 방법은 브라우저의 뒤로가기나 앞으로 가기 버튼을 통해 페이지를 이동하는 경우에는 동작하지 않을 수 있고,

상태 데이터가 url에 노출되는 단점이 있다.

 

최종 수정(해결 방법)

결국 redux를 이용해서 게시판 정보를 관리하도록 수정하였다.

1. 처음 게시판에 접속시, api 호출 데이터를 dispatch 함수로 store에 세팅해준다.

2. 해당 게시판 내의 페이지 안에서 useSelector 훅으로 store 상태값을 가져와 사용한다.