개발자

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

2022년 12월 15일조회 286

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

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

답변 1

엄홍재님의 프로필 사진

recoil에서 비동기 데이터처리를 할때는 기본적인 useEffect를 써서 동일하게 구현해도 문제는 없습니다. useState로는 로딩상태나 error상태를 업데이트하고, useRecoilState에 API가 success일 때, 데이터를 넣는 거죠. 예를 들면 아래와 같은 과정으로 const [loading, setLoading] = useState(true) const [data, setData] = useRecoilState([]) useEffect(()=>{ // api call setDate(result.data) setLoading(false) }, []} 하지만 이렇게 기본적인 것 말고 recoil에서 제공하는 selector를 사용하면 됩니다. 공식문서의 코드를 보면 아래와 같습니다. const currentUserNameQuery = selector({ key: 'CurrentUserName', get: async ({get}) => { const response = await myDBQuery({ userID: get(currentUserIDState), }); return response.name; }, }); function CurrentUserInfo() { const userName = useRecoilValue(currentUserNameQuery); return <div>{userName}</div>; } 그리고 해당 요청에 대한 상태는 useRecoilValueLoadable을 통해서 가져올 수 있는데요. const userNameLoadable = useRecoilValueLoadable(currentUserNameQuery); 이런식으로 사용하고 해당 값에는 hasValue, loading, hasError 가 들어갑니다. 좀 더 자세한 내용은 공식문서를 참고해보세요 https://recoiljs.org/ko/docs/guides/asynchronous-data-queries/

profile picture

익명

작성자

2022년 12월 16일

오.. 그렇군요 친절한 설명 감사합니다. 공식문서를 읽는 습관을 들여야겠네요!

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

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

또는

이미 회원이신가요?

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

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

새로운 질문 올리기

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