[성능 최적화] Question 페이지 성능 최적화

같은 생명주기를 가진 데이터를 하나의 Context 로 관리하고 있다. 단순 데이터 뿐 아니라 데이터를 변경하는 메서드까지 커스텀 훅으로 만들어 UI 와 비즈니스 로직을 분리했다.

하지만 멘토님께서 설명해준 방식과 사뭇 다르게 코드를 이해한 나머지, 네트워크 요청이 4번씩 이뤄지는 것을 react-query dev tools 를 통해 확인할 수 있었다.

문제 상황

다음과 같은 파일들이 있다.

• Question.tsx 질문 페이지
  
• QuestionContext.tsx Question 파일에서 사용할 데이터를 내려보낼 컨텍스트
  
• useQuestion.ts 데이터를 조작할 수 있는 메서드를 모아둔 커스텀 훅 파일
  

Question 페이지와 하위 컴포넌트들

const Question = () => {
	return (
		<QuestionProvider>
			<QuestionHeader />
			<QuestionForm />
			<QuestionAnswers />
			<QuestionChatting />
		</QuestionProvider>
	)
}

위와 같이 Question (페이지) 컴포넌트는 총 4개의 하위 컴포넌트를 가지고 있다. 그럼 이 각각의 컴포넌트는 어떻게 메서드를 가져와 사용할까?

QuestionForm 컴포넌트를 살펴보자.

import useQuestion from './useQuestion';

const QuestionForm = () => {
	const { questionData } = useQuestion();
}

QuestionForm 컴포넌트는 useQuestion 훅을 호출하여 필요한 데이터 핸들링 메서드나, 데이터를 꺼내 쓰는 방식을 취하고 있다.

하지만 이런 방식의 문제점이 뭘까? 바로 데이터를 필요로 하는 컴포넌트의 수만큼 useQuestion 훅이 호출된다는 것이다.

useQuestion 커스텀 훅

useQuestion 커스텀 훅은 Question 페이지에서 사용할 데이터와 메서드들을 선언해 놓은 파일이다.

그중 최상단에선 useMutation 을 사용해서 쿼리 요청을 보내고 있다.

// useQuestion

const useQuestion = () => {
	const { mutate: createTodayQuestionMutate } = useCreateTodayQuestion();

	useEffect(() => {
		createTodayQuestionMutate();
	}, []);
}

보이는 바와 같이 useEffect 를 사용하여 훅이 생성될 때 최초 한번만 함수를 실행하도록 했다.

하지만 문제는 커스텀 훅을 호출할 때 마다 생성이 다시 일어나다 보니, 총 n 번의 요청이 가게 된다는 점이다.

완전히… 커스텀 훅에 대해 잘못 이해를 하고 있었기에 이렇게 요청이 많이 갈 수 밖에 없었다.

로직을 좀 바꿔야겠는데요?

문제는 나 뿐 아니라 팀 전체가 이런 방식으로 커스텀 훅의 로직을 가져다 쓰는 데 있었고, 팀원들에게 바로 이 문제를 알렸다.

그리고 네트워크 요청을 한 번만 할 수 있도록 하기 위해 Context 에서 커스텀 훅을 호출하는 방식으로 바꾸게 되었다.

어떻게 네트워크 요청을 한번만 할 수 있을까?

아래와 같이 Context 파일 내부에서 커스텀 훅을 호출하게 되면 메서드를 받아올 수 있을 뿐더러, query 요청도 한 번만 일어나게 된다.

// QuestionContext

const QuestionProvider = ({children}) => {
	const question = useQuestion();
	
	return (
		<QuestionContext.Provider value={question} >
			{children}
		</QuestionContext.Provider>
	)
}

이렇게 Provider 로 내려준 커스텀 훅을 컴포넌트가 사용하는 방식으로 (일종의 오류였던) 네트워크 요청을 줄일 수 있었다.