안녕하세요! 프론트엔드 개발을 막 시작한 ‘리액트초보’입니다.

개인 프로젝트로 게시판 목록 페이지를 만들고 있는데, 해당 페이지에만 들어가면 브라우저가 느려지다가 결국 뻗어버리는 현상이 발생해서 답답한 마음에 질문을 남깁니다.

발생한 문제 (무한 루프)

컴포넌트가 화면에 렌더링될 때 서버에서 게시글 데이터를 가져오기 위해 useEffect 훅을 사용했습니다. 그런데 크롬 개발자 도구의 네트워크(Network) 탭을 확인해보니, API 요청이 쉬지 않고 수백 번씩 날아가고 있었습니다.

“콘솔 창에 특별한 에러 메시지도 안 뜨고, 결국 메모리 초과로 브라우저 탭이 강제로 종료됩니다.”

작성한 코드

제가 작성한 데이터 페칭(Data Fetching) 부분의 코드는 아래와 같습니다.

const [posts, setPosts] = useState([]);

useEffect(() => {
    const fetchPosts = async () => {
        try {
            const response = await axios.get('/api/posts');
            // 여기서 상태를 업데이트합니다
            setPosts(response.data); 
        } catch (error) {
            console.error("데이터를 불러오는데 실패했습니다.", error);
        }
    };

    fetchPosts();
}); // <-- 제 생각엔 이 부분 의존성 배열 문제인 것 같습니다
        

궁금한 점 (도움 요청)

구글링을 해보니 의존성 배열(Dependency Array)을 비워두면 무한 루프에 빠질 수 있다고 합니다. 하지만 막상 코드 끝에 [] (빈 배열)을 넣으면 ‘React Hook useEffect has a missing dependency’라는 ESLint 노란색 경고줄이 뜹니다.

이런 경고를 무시하고 그냥 빈 배열을 넣는 것이 맞는 방법인지, 아니면 제가 상태 관리를 근본적으로 잘못하고 있는 것인지 잘 모르겠습니다.

• 무한 루프가 발생하는 정확한 원인이 무엇인가요?
• 데이터를 처음 렌더링될 때 딱 한 번만 불러오려면 코드를 어떻게 수정해야 할까요?

선배 개발자님들의 귀중한 조언을 부탁드립니다. 감사합니다!