redux 와 recoil 이 데이터를 저장하는 방법의 차이?

지난 주에 면접을 보고 왔는데 이런 질문을 받았습니다... Q) redux는 하나의 store를 가지고 recoil은 여러 개의 atom을 가지는데 여러 개의 저장소를 가지는 것과 하나의 저장소를 가지는 것에 대한 장단점이 어떤 것이 있을까요? 각 저장소 별로 역할을 구분할 수 있는 장점이 있다고 말씀드리긴 했는데 좋은 답변은 아니었던 것 같아요ㅠㅠ 위 질문에 대해 어떻게 답변드리면 좋은 답변이었을까요?

페이지 이동시에 필요한 정보들을 어떻게 전달할지 고민중입니다.

페이지 이동시에 필요한 정보들이 있는 경우 현재 recoil을 사용하여 1. Link 태그 onClick시 recoil을 이용해 상태 저장 2. 새로운 페이지 이동에서 useRecoilValue로 사용중인데 이게 맞는 방법인지 모르겠어서 여쭤보려고 합니다. 보통 하위 페이지가 아닌 다른 페이지 이동할 때 전달해야 하는 값이 있다면 어떤 방법을 사용하는게 가장 좋나요?

React 에서 token, refresh-token 을 전역 상태로 관리하려고 하는데 어떻게 구현하는게 좋을까요 ?

안녕하세요!! token, refresh token 에 대한 global 상태관리를 해야 합니다. 이정도 규모의 상태관리는 어떤 기능을 활용하는게 적당할까요 ? - redux (사용해본 경험이 있어서 편하긴 한데.. 고민이 됩니다) - recoil

react axios 로 api호출시 recoil value 전달 실패

회원가입 마지막 단계 페이지인 관심태그 페이지입니다. 이미 nickName, email, phoneNum, pwd, subGroup, workYear는 recoil의 userState에 저장된 상태입니다. 다음 코드를 실행하면 api 호출에는 성공하는데, isSuccess가 false가 되면서 '이메일을 입력해주세요'라는 message가 뜨고 회원가입 실패 alert 창이 뜹니다. 아무래도 recoil value의 전달에 실패한 것 같은데 왜 그럴까요? 참고로 api 주소는 가짜로 적었습니다. function InterestTag() { const [user, setUser] = useRecoilState(userState); const [interestIdx, setInterestIdx] = useRecoilState(userState); const [buttonColor, setButtonColor] = useState("f1f4f7"); const nickName = useRecoilValue(userState).nickName; const email = useRecoilValue(userState).email; const phoneNum = useRecoilValue(userState).phoneNum; const pwd = useRecoilValue(userState).pwd; const subGroup = useRecoilValue(userState).subGroup; const workYear = useRecoilValue(userState).workYear; const handleTagClick = (interestIdx) => { setInterestIdx(interestIdx); setUser({ ...user, interestIdx: interestIdx, isLogin: true, }); setButtonColor("#36f"); }; console.log(interestIdx); const navigate = useNavigate(); const handleSubmit = () => { axios .post("https://abcd.shop/users", { data: { nickName: nickName, email: email, phoneNum: phoneNum, pwd: pwd, subGroup: subGroup, workYear: workYear, interestIdx: interestIdx, }, }) .then((response) => { console.log(response.data); if (response.data.isSuccess === true) { alert("회원가입 성공"); navigate("/"); } else { alert("회원가입 실패"); } }); };

리액트에서 상태관리로 Redux를 무조건 공부해야할까요?

안녕하세요 저는 풀스택 개발자이고 2년만에 다시 리액트를 공부하려고 합니다. 얼마전에 리액트 2023 로드맵을 봤는데요 (사진 첨부했습니다.) 해당 로드맵에서 언급된 상태관리중 어떤걸 공부해야할지 고민됩니다. 상태관리 - 추천: Recoil, Zustand, Context - 대안: Redux / Toolkit, Mobx 2년전에는 Redux는 상태관리에서 거의 필수라고 했던 것 같은데 로드맵에서는 Recoil, Zustand, Context를 추천하고 Redux는 대안이라고 언급하네요. 요즘 리액트를 공부하게되면 Redux는 굳이 공부할 필요 없을까요? Recoil을 공부해보려고 하는데 Redux도 같이 공부해야하는 고민됩니다. 긴글 읽어주셔서 감사합니다.

recoil에서 비동기 처리가 가능한가요?

redux에서 비동기 처리를 위해 thunk나 saga를 사용하면 된다고 알고 있었고 저는 thunk를 사용한 경험이 있습니다. 이번에 새로운 프로젝트를 하면서 recoil을 사용하기로 했는데요. recoil에서도 비동기 처리를 하려면 다른 library를 사용해야 할까요?

React toast 구현 관련

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