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

Question

안녕하세요 제로초님 제가 출력 된 것들을 삭제 하는 함수를 만들고 있습니다. 제가 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 /> ))} )

제로초(조현영) · Answer

setCategoryId는 비동기라서 categoryId에 값이 적용되기 전에 axios가 더 먼저 실행됩니다. axios는 useEffect 내부에서 categoryId의 변화를 감지한 후에 실행하셔야 합니다.