인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

김민수님의 프로필 이미지
김민수

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

2번 클릭해야 axios.delete 반응하는 이유

작성

·

255

0

안녕하세요 제로초님 제가 출력 된 것들을 삭제 하는 함수를 만들고 있습니다.
제가 category 값을 map 함수로 출력 해 준 뒤
li value값에 category id 값을 넣어 주었습니다.
 
값을 제어 할려고 -> useState(categoryId) 만들어 주었습니다.
li 태그 onClick 를 하면 ContentDelete 라는 삭제하는 함수가 호출 됩니다.
 
그리고 e.target.value 을 이용해서 -> categoryId 에 value 값을 넣어주었습니다.
그리고 categoryId 값을 서버에 호출 해 주었습니다.
 
하지만 Delete li 태그 onClick 를 2번 해야 axios.delete 가 먹힙니다.
 
DELETE http://localhost:3065/api/category/0 404 (Not Found) -> 한 번 클릭 할 경우 useState 초기값인 0이 나옵니다.
DELETE http://localhost:3065/api/category/18 404 (Not Found) -> 한 번 더 클릭해야 18이 나오고 404 에러가 나지만 삭제는 됩니다.
 
왜 이러는 지 모르겠습니다... async await 으로 비동기 처리도 제대로 해 주고 return 문에다가 넣어주었는데 왜 처음 클릭하면 state 초기값인 0이 찍히는 지...
 
const [categoryId, setCategoryId] = useState<number>(0);
 
const ContentDelete = useCallback( async (e) => {
setCategoryId(e.target.value);
return await axios.delete(`http://localhost:3065/api/category/${categoryId}`, {
withCredentials: true,
})
}, [categoryId])
 
return (
<ul>
{categorys && categorys.map((test: { id: any, content: React.ReactChild }) => (
<li key={test.id} value={test.id} onClick={ContentDelete}>{test.content}
<AiOutlineClose />
</li>
))}
</ul>
)

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

setCategoryId는 비동기라서 categoryId에 값이 적용되기 전에 axios가 더 먼저 실행됩니다.

axios는 useEffect 내부에서 categoryId의 변화를 감지한 후에 실행하셔야 합니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

아니면 axios에 e.target.value를 하시면 되겠네요.

김민수님의 프로필 이미지
김민수

작성한 질문수

질문하기