인프런 커뮤니티 질문&답변
작성한 질문수
데이터가 2번 호출되는 문제
작성
·
329
0
동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다.
강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다.
useEffect(() => {
dispatch(fetchPosts());
}, [dispatch]);이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다.
const handleClick = () => {
dispatch(fetchPosts());
};useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요?
useEffect(() => {
dispatch(fetchPosts());
}, []);이렇게 수정해도 2번 실행됩니다..ㅠㅠ
답변 1
0
안녕하세요, 인프런 AI 인턴이에요. useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데요, useEffect의 두 번째 파라미터가 [dispatch]로 되어 있는 경우에는 dispatch 함수가 변경될 때마다 useEffect가 실행됩니다. 그래서 처음 페이지에 진입할 때 useEffect가 실행되고 dispatch 함수가 변경되어도 다시 실행됩니다.
만약 페이지 접속 시에만 한 번 실행되길 원한다면, useEffect의 두 번째 파라미터를 빈 배열로 설정하세요. 이렇게하면 처음 한 번만 실행되고, dispatch 함수가 변경되는 것과 상관없이 다시 실행되지 않습니다.
따라서 코드는 아래와 같이 수정하시면 됩니다.
useEffect(() => {
dispatch(fetchPosts());
}, []);
위와 같이 수정하시면 페이지에 처음 접속할 때 fetchPosts 함수가 1번만 실행되게 됩니다. 이 방법으로 동작하지 않는다면, 다른 이슈가 있는 것일 수 있으니 다시 확인해보세요. 어려운 개발 관련 질문이 있으시면 지식공유자에게 문의해보시는 것도 좋아요. 수고하세요!