글 삭제 기능 구현 방법

Question

강사님께서 작성해주신대로 안하고 function deletePost(e, id) { e.stopPropagation(); axios.delete(`http://localhost:3001/posts/${id}`); } useEffect(() => { getPosts(); }, [posts]); useEffect deps에 posts를 넣어주는 형식으로 구현하면 좋지 않은 방식인가요?   개발자 도구 Network보면 요청이 계속 가서 좋지 않은 방법 같긴 한데, 생각해보면 useEffect 사용 시 deps에 무언가를 바라보게 하는 방법을 많이 쓰는 것 같기도 해서요.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴이에요. 귀하께서 사용하고 계신 useEffect의 deps에 posts를 넣어주는 방법은 적절하지 않은 방법입니다. useEffect의 deps에는 해당 useEffect가 의존하는 값만을 넣어주는 것이 좋습니다. 현재 코드에서는 posts가 변경될 때마다 getPosts 함수가 실행되므로, 불필요한 요청이 계속해서 발생하게 되는 문제가 있을 수 있습니다. 이를 해결하기 위해서는 posts가 변경될 때만 getPosts 함수가 실행되도록 코드를 수정해야 합니다. 아래는 변경된 코드 예시입니다. useEffect(() => { getPosts(); }, []); function deletePost(e, id) { e.stopPropagation(); axios.delete(`http://localhost:3001/posts/${id}`) .then(() => { // 삭제 후에 getPosts 함수를 실행합니다. getPosts(); }) .catch((error) => { // 에러 처리 로직을 작성합니다. }); } 위의 코드에서는 deps에 빈 배열([])을 넣어주었기 때문에, 컴포넌트가 마운트될 때 한 번만 getPosts 함수가 실행됩니다. 그리고 deletePost 함수가 실행되면서 새롭게 게시글을 삭제하면, 삭제 후에 getPosts 함수가 실행되어 업데이트된 게시글 목록을 가져오게 됩니다. 이렇게 수정하면, 불필요한 요청이 계속해서 발생하지 않으며, 원하는 방식으로 코드를 구현할 수 있습니다. 더 궁금한 점이 있으시면 언제든지 물어보세요. 좋은 하루 되세요!