React toast 구현 관련

Question

안녕하세요. Toast 관련해서 질문이 있습니다.

toast를 띄워놓은 상태에서 페이지의 이동이 가능한지요?

현재 진행중인 프로젝트의 상황을 설명 드리겠습니다.

회원가입을 하면 “회원가입완료” 라는 alert창 대신 toast를 띄우고 싶은데요.
라이브러리를 쓰지않고 구현을 해보려고 합니다.

다만 회원가입창의 구조가 여러 겹으로 되어있습니다.
Route path는 1개 입니다. Url주소가 같은 상태에서 다음버튼을눌러가면서 인풋창에 정보를 기입하게 되는데요.
최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다.

시도해본 바로는 modal처럼 페이지 위에서 띄우는건데 그마저도 안뜨고 있긴 합니다…
회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다.

검색을 해도 명확하게 나오지 않는 부분이 있어서 질문해보았습니다ㅠ 토스트를 어디에서 띄우는 것이 현명한 방법일지 몰라서 시도는 해보고 있는데 시간도 촉박합니다.. 라이브러리를 쓰는것이 나을까요..?

프레드윰 · Answer

도움이 될진 모르겠지만 제가 보던 인강에 토스트로 알림띄워주는게 있는데요
이거 참고해보세요.
https://www.inflearn.com/course/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum

성원 · Answer

| 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다.

isSuccessSignUp(boolean) 전역 상태를 하나 선언하고, 회원가입 성공시에 상태를 true로 바꾼 뒤 메인 페이지에 이동했을 때 값이 true이면 토스트를 띄워주고 상태를 다시 false로 바꾸는 방법은 어떨까요?

| 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다.

이건 toast 구현과는 별도의 문제인 것 같습니다. 로그인 중일때 회원가입 입력페이지를 그려주는 것 같은데 api요청중에 회원가입 페이지를 그리지 않도록 조건을 주면 될 것 같습니다. 이건 화면이나 코드를 볼 수 없어서 자세하게 답변드리기 어렵네요

문석기 · Answer

말씀 주신 내용을 정리해보면
회원가입 버튼 눌렀을때 동작(기능?)이 4가지 정도로 보입니다.
1. 회원가입 성공여부
2. 성공했다면 성공 토스트 메시지
3. 로그인 처리
4. 메인 페이지로 네비게이트

토스트메시지를 기준으로
-회원가입 페이지에서 띄운다면
토스트 메시지가 종료되고 4번기능을 시작하고

-메인 페이지에서 토스트메세지를 띄운다면
4번기능을 시작 한 후 
메인 페이지에서 토스트메세지를 띄워야합니다.

사용하시는 상태관리 라이브러리에 따라 구현방법은 다르겠지만 로직 자체는 위처럼 순차적으로 기능을 넣으신다면 문제가 없을 것 같습니다.