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

유형주님의 프로필 이미지
유형주

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

Ant Design Form을 활용한 회원가입 폼 만들기

안녕하세요 강사님!~

작성

·

175

0

- 여러분의 질문을 고대하고 있습니다. :-)
- 질문 전에 검색을 먼저 해보세요. 사람 사는 게 다 비슷하다는 것을 알게 됩니다.
- 예의는 거침없이 질문하기 위한 최고의 발명품입니다.
- 100개의 설명이 스크린샷 한방 보다 못할 수 있습니다.
- 코드를 첨부하면 전세계 누구나 이해할 수 있는 질문이 됩니다.
- 하나의 질문에는 하나의 주제를 담아야 답변도 예리해집니다.
- 시행착오를 알려주시면 곧 바로 원하는 문제에 집중할 수 있습니다.

- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

안녕하세요 강사님 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 프레임워크를 쓰신다면, 틈 나실 때마다 제공해주는 컴포넌트를 하나하나 살펴봐두시면 추후 개발하실 때에 도움이 됩니다.

화이팅입니다. :-)

유형주님의 프로필 이미지
유형주
질문자

답변 감사드립니다!

유형주님의 프로필 이미지
유형주

작성한 질문수

질문하기