Redux에서의 요청 중복 제거

이 강의는 애플리케이션을 시작할 때 데이터 요청 전송이 중복되고, 그 결과 동일한 id를 가진 제품 쌍이 도착하며, 결과적으로 브라우저 콘솔에 불쾌한 빨간색 경고가 표시되는 경우에 유용할 것입니다.

이 문제의 원인은 개발 모드(dev)에서 React.StrictMode를 사용할 때 React 18 버전 이상에서의 컴포넌트 마운트 특성에 있습니다 (프로덕션 모드에서는 괜찮다고 합니다). 먼저 컴포넌트가 마운트되고, 그런 다음 언마운트된 후 다시 마운트됩니다. 따라서 요청이 두 번 전송됩니다.

아마도 여러분이 이 자료를 공부할 때쯤이면 React의 이 이중 마운트 문제는 어떤 식으로든 이미 변경되었을 수도 있습니다. 우리는 깊이 파고들지 않고 간단히 이 문제를 우회하는 데 도움이 될 React 훅 useRef를 사용해 보겠습니다.

제품 애플리케이션을 열고 그 안의 ProductsList.jsx 파일을 열어 봅시다. 여기에 useRef 훅을 가져옵니다:

import { useEffect, useRef } from 'react'

이제 다음 useEffect 코드 블록을 약간 수정해 보겠습니다:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

먼저 useRef를 위한 새 변수 dataFetch를 소개하겠습니다. 처음에 해당 속성 current를 false로 설정합니다. 애플리케이션이 이미 시작되었고, 따라서 요청이 전송되었다면 current 속성은 이미 true일 것이므로, 우리는 단순히 함수에서 나가고 데이터의 반복 요청이 발생하지 않을 것입니다. 그럼, 위에서 언급한 코드 조각이 이제 다음과 같을 것입니다:

const dataFetch = useRef(false)

useEffect(() => {
	if (dataFetch.current) return
	dataFetch.current = true
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

이제 애플리케이션을 다시 시작하고 콘솔의 빨간색 경고가 사라진 것을 안도하며 확인하고, 중복 없는 제품 목록을 보게 될 것입니다. 이제 서버에서 계획한 대로 8개입니다. 이제 Redux DevTools에서 요청 시 생성되는 액션은 더 이상 반복되지 않습니다.

학생 애플리케이션을 열고, 그 안의 StudentsList.jsx 파일을 여세요. 강의 자료에 따라 이중 요청 문제가 있다면 해결하세요.