개발자

React toast 구현 관련

2022년 11월 30일조회 490

안녕하세요. Toast 관련해서 질문이 있습니다. toast를 띄워놓은 상태에서 페이지의 이동이 가능한지요? 현재 진행중인 프로젝트의 상황을 설명 드리겠습니다. 회원가입을 하면 “회원가입완료” 라는 alert창 대신 toast를 띄우고 싶은데요. 라이브러리를 쓰지않고 구현을 해보려고 합니다. 다만 회원가입창의 구조가 여러 겹으로 되어있습니다. Route path는 1개 입니다. Url주소가 같은 상태에서 다음버튼을눌러가면서 인풋창에 정보를 기입하게 되는데요. 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다. 시도해본 바로는 modal처럼 페이지 위에서 띄우는건데 그마저도 안뜨고 있긴 합니다… 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다. 검색을 해도 명확하게 나오지 않는 부분이 있어서 질문해보았습니다ㅠ 토스트를 어디에서 띄우는 것이 현명한 방법일지 몰라서 시도는 해보고 있는데 시간도 촉박합니다.. 라이브러리를 쓰는것이 나을까요..?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

프레드윰님의 프로필 사진

도움이 될진 모르겠지만 제가 보던 인강에 토스트로 알림띄워주는게 있는데요 이거 참고해보세요. 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

profile picture

익명

작성자

2022년 12월 01일

감사합니다~!!

성원님의 프로필 사진

| 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다. isSuccessSignUp(boolean) 전역 상태를 하나 선언하고, 회원가입 성공시에 상태를 true로 바꾼 뒤 메인 페이지에 이동했을 때 값이 true이면 토스트를 띄워주고 상태를 다시 false로 바꾸는 방법은 어떨까요? | 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다. 이건 toast 구현과는 별도의 문제인 것 같습니다. 로그인 중일때 회원가입 입력페이지를 그려주는 것 같은데 api요청중에 회원가입 페이지를 그리지 않도록 조건을 주면 될 것 같습니다. 이건 화면이나 코드를 볼 수 없어서 자세하게 답변드리기 어렵네요

profile picture

익명

작성자

2022년 12월 01일

답변 주신거 힌트 삼아서 구현했습니다…! 아직 좀 어설프긴 하지만 조금씩 다듬어 가려고 합니다. 감사합니다!

문석기님의 프로필 사진

말씀 주신 내용을 정리해보면 회원가입 버튼 눌렀을때 동작(기능?)이 4가지 정도로 보입니다. 1. 회원가입 성공여부 2. 성공했다면 성공 토스트 메시지 3. 로그인 처리 4. 메인 페이지로 네비게이트 토스트메시지를 기준으로 -회원가입 페이지에서 띄운다면 토스트 메시지가 종료되고 4번기능을 시작하고 -메인 페이지에서 토스트메세지를 띄운다면 4번기능을 시작 한 후 메인 페이지에서 토스트메세지를 띄워야합니다. 사용하시는 상태관리 라이브러리에 따라 구현방법은 다르겠지만 로직 자체는 위처럼 순차적으로 기능을 넣으신다면 문제가 없을 것 같습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!