Next JS 사용 중 위와 같은 현상을 접했다.
클라이언트 컴포넌트에서 api 경로에 접근해서 데이터를 가져오는 테스트를 하던 중이었는데, 화면은 이상 없이 로딩되었지만 콘솔을 보니 저렇게 Fast Refresh라는 로그가 계속 반복되고 있었다.
Fast Refresh는 웹소켓이 연결을 유지하는 것처럼 특정한 상황이라면 정상적일 수도 있으나, 이번 경우는 단순히 1회성으로 데이터를 가져오는 화면이었고 refresh 속도도 매우 빨랐기에 불필요한 현상이었다.
당장은 문제가 없을지라도 향후 리렌더링이 무한으로 발생하는 등 이슈가 될 수 있기에 코드를 검토해보았다.
'use client';
import { useEffect, useState } from 'react';
export default function Fetch() {
const [user, setUser] = useState({id: null});
useEffect(() => {
fetch(process.env.NEXT_PUBLIC_API_URL + '/api/1')
.then(type => type.json())
.then(result => {
setUser(result);
})
});
return (
<>
<h1>/app/sub/fetch/page.js</h1>
<p>{user.id}</p>
<a href="/">/app/page.js</a>
</>
)
}
검토 결과, useEffect 내부에서 setUser를 사용한 것이 무한루프의 원인이었다.
useEffect 내부에서 setUser를 실행하면서 상태가 변경되게 되는데, 상태 변경에 따라 useEffect가 재실행되면서 무한 루프가 발생했다.
| useEffect() 실행 | set User 사용 |
| 컴포넌트 리렌더링 | user 상태 변경 |
(시계방향으로 순회)
그래서 useEffect에 의존성 배열을 추가함으로써 무한루프 현상을 해결하였다.
의존성 배열을 추가하게 되면 컴포넌트가 처음 렌더링될 때에만 useEffect가 실행되고 되고, 이후에는 상태가 변경되더라도 실행되지 않아 무한루프를 방지할 수 있다.
useEffect(() => {
fetch(process.env.NEXT_PUBLIC_API_URL + '/api/1')
.then(type => type.json())
.then(result => {
setUser(result);
})
}, []);
* 2025.03.14 추가
의존성 배열(Dependency Array)이란, useEffect가 언제 실행될지를 결정하는 배열이다.
예를 들어 user 상태가 변경될 때마다 useEffect를 실행하고 싶다면, useEffect의 두 번째 인자로 [user]를 전달하면 된다.
의존성 배열이 없는 경우 (useEffect(() => {...}))
→ 모든 렌더링마다 실행되므로 성능 이슈가 발생할 수 있다.
빈 배열 []을 전달하는 경우 (useEffect(() => {...}, []))
→ 처음 렌더링(마운트) 시에만 실행되고, 이후에는 다시 실행되지 않는다.
끝!
'Languages > Next.js' 카테고리의 다른 글
| [NextJS] You have a Server Component that imports next/router 에러 해결 (2) | 2025.02.17 |
|---|