TIL-23.05.29

 

문제점&시도한점

사이트 마이페이지 내부 Review 탭 / Bookmark 탭 2개의 탭을 각각 클릭 시 해당 데이터를 렌더링하는 코드

useEffect를 활용하는 코드와 useQuery를 활용하는 코드 중 어느것의 성능이 더 좋은지 테스트해보았다.

 

1. useEffect 훅을 활용하는 코드

const [activeButton, setActiveButton] = useState(1); //탭 구분 1,2
const [reviewData, setReviewData] = useState([]); // 리뷰 데이터
const [bookmarkData, setBookmarkData] = useState([]); // 북마크 데이터

  const getBookmark = async () => {
    const response = await api.get('/api/bookmark');
    setBookmarkData(response);

  };
  const getReview = async () => {
    const response = await api.get('/api/comment');
    setReviewData(response);
   
  };

   useEffect(() => {
    if (activeButton === 1) {
       getReview();
    } else if (activeButton === 2) {
      getBookmark();
     }
   }, [activeButton]);

activeButton의 값 (1:review , 2:bookmark)의 변화에 따른 서버통신 요청 코드

 

 

 

 

2. useQuery를 활용한 코드

 

const [activeButton, setActiveButton] = useState(1);

  const getBookmark = async () => {
    const response = await api.get('/api/bookmark');   
    return response;
  };
  const getReview = async () => {
    const response = await api.get('/api/comment');   
    return response;
  };
  
  const { data: reviewData, isLoading: isLoadingReview } = useQuery(
    'getReview',
    getReview
  );
  const { data: bookmarkData, isLoading: isLoadingBookmark } = useQuery(
    'getBookmark',
    getBookmark
  );

마이페이지에 들어왔을때 처음부터 review, bookmark 데이터를 모두 get 통신 후 캐싱 저장

각각의 탭 클릭 시 서버요청은 없고, 이미 캐시에 저장되어있는 데이터를 렌더링 해주는 방식

 

 

 

어떠한 방식의 성능이 더 좋은지 크롬의 확장프로그램 LightHouse로 측정해보았다.

예상대로겠지만,,, 캐싱 기능을 활용하는 useQuery의 방법의 성능이 더 좋았다. 탭을 누를때마다 서버통신을 하는 방식(useEffect)보다 처음 한번만 서버통신을 하고 변경점이 생길때만 재 통신하는 방식이라 아무래도 성능이 더 좋을수 밖에 없다.

이번 프로젝트에는 이렇게 최적화에 대해 신경을 쓰면서 코드를 작성하려 노력중이다.  최대한 불필요한 서버통신 요청 횟수를 줄이고, 꼭 필요한 곳만 재 렌더링되도록 신경써가면 코드를 작성하려한다.

 

 

 

알게된점

같은 결과(렌더링)를 가져오는 방법이라도, 그 과정에서 분명한 성능차이가 발생할수있다. 이걸 최적화하는게 개발자의 몫이니 신경써가며 코드를 작성해야겠다.