작성
·
175
0
안녕하세요 강사님 axios 처리 과정 구현 중
안돼는 부분이 있어 질의 드립니다.
현재 response를 받아서 응답코드가 201일 경우
success Alert 컴포넌트를 띄우고 싶은데...
백엔드 쪽에 계정만 생성되고 프론트쪽에는 아무런 변화가
없습니다. 혹시 어떤 방향으로 처리해야 할지 문의드립니다.
const onSubmit = (e) => {
e.preventDefault()
setErrors({});
Axios.post("http://localhost:8000/accounts/signup/", inputs)
.then(response => {
if(response['status'] === 201)
{
return (
<Alert severity="success">Success</Alert>
)
}
history.push('/')
console.log(response['status'])
},
)
.catch(error => {
if (error.response) {
setErrors({
username: (error.response.data.username || []).join(" "),
password: (error.response.data.password || []).join(" "),
email: (error.response.data.email || []).join(" ")
});
console.log(error.response)
}
})
.finally(() => {
setLoading(true)
setInputs({username: '', password: '', email: ''})
});
};
답변 1
1
안녕하세요.
response.status 체크를 하셨지만, 반환한 Alert 컴포넌트가 실제로 화면에 표현되지 않아서 발생하시는 이슈 같습니다. Axios 내에서 jsx를 리턴하더라도 이것이 화면에 반영되는 것은 아닙니다. 렌더링을 할 대상이 없기 때문입니다.
Alert 컴포넌트는 단순히 <박스 스타일>을 도와주는 컴포넌트 일 뿐입니다. 이를 구현하실려면 추가로 Portals API를 학습해서 구현해보실 수도 있지만, ant design에서는 notification와 같은 api도 있으니 이를 활용해보시면 어떨까요?
https://ant.design/components/notification/
화면 우상단에 아래와 같은 알림창이 뜨며, 여러 위치로 설정하실 수 있으실 것입니다.
성격은 조금 다르지만, Popconfirm과도 같은 컴포넌트도 있으니 참고해보세요.
https://ant.design/components/popconfirm/
Ant Design과 같은 UI 프레임워크를 쓰신다면, 틈 나실 때마다 제공해주는 컴포넌트를 하나하나 살펴봐두시면 추후 개발하실 때에 도움이 됩니다.
화이팅입니다. :-)
답변 감사드립니다!