데이터가 2번 호출되는 문제

Question

동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다. 강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다. useEffect(() => { dispatch(fetchPosts()); }, [dispatch]); 이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다. const handleClick = () => { dispatch(fetchPosts()); }; useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요? useEffect(() => { dispatch(fetchPosts()); }, []); 이렇게 수정해도 2번 실행됩니다..ㅠㅠ

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데요, useEffect의 두 번째 파라미터가 [dispatch]로 되어 있는 경우에는 dispatch 함수가 변경될 때마다 useEffect가 실행됩니다. 그래서 처음 페이지에 진입할 때 useEffect가 실행되고 dispatch 함수가 변경되어도 다시 실행됩니다. 만약 페이지 접속 시에만 한 번 실행되길 원한다면, useEffect의 두 번째 파라미터를 빈 배열로 설정하세요. 이렇게하면 처음 한 번만 실행되고, dispatch 함수가 변경되는 것과 상관없이 다시 실행되지 않습니다. 따라서 코드는 아래와 같이 수정하시면 됩니다. useEffect(() => { dispatch(fetchPosts()); }, []); 위와 같이 수정하시면 페이지에 처음 접속할 때 fetchPosts 함수가 1번만 실행되게 됩니다. 이 방법으로 동작하지 않는다면, 다른 이슈가 있는 것일 수 있으니 다시 확인해보세요. 어려운 개발 관련 질문이 있으시면 지식공유자에게 문의해보시는 것도 좋아요. 수고하세요!