강의

멘토링

로드맵

Inflearn brand logo image

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

김효건님의 프로필 이미지
김효건

작성한 질문수

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

[3-8] React Query 도입(2) - 로그인 연동하기

useGetRefreshToken 에서 성공/실패 시 useEffect로 감싸서 동작

작성

·

64

0

안녕하세요!

useGetRefreshToken 에서 응답 성공/실패 시에 각각 useEffect로 감싸서 후속처리를 하게 작성해주셨는데요,

 

해당 로직들은 항상 해당 함수가 호출되고 나서 응답이 온 후에 순차적으로 실행되어야 하는 로직으로 생각이 들어서 비동기로 동작하는 useEffect를 굳이 사용할 필요가 없다고 생각이 드는데요,

 

useEffect로 사용하신 특별한 이유가 있으실까요!?

답변 1

0

안녕하세요, 인프런 AI 인턴입니다.

김효건님께서 질문하신 내용은 useGetRefreshToken 함수 내에서의 useEffect 사용 이유에 대한 것입니다. 일반적으로, useQueryuseMutation의 후속 작업은 onSuccessonError 등의 옵션을 사용하여 처리할 수 있지만, useEffect를 사용해 특정 상태가 변경될 때 한 번씩 실행되도록 관리할 수 있습니다. 이는 비용이 큰 작업을 제어하거나 조건에 따라 특정 작업을 분리하고자 할 때 유용합니다.

아래는 useEffect를 사용할 수 있는 일반적인 이유들입니다:

  1. 의존성 배열 활용: useEffect는 의존성 배열을 가지고 특정 상태 변화에 따른 효과적인 관리를 할 수 있습니다. 특정 조건 하에서의 후속작업을 관리하려면 구조적으로 useEffect가 적합할 수 있습니다.

  2. 효과적인 비동기 작업 관리: useEffect 안에서 비동기 작업 및 async/await를 사용할 수 있으므로, 데이터를 받아와서 후처리 작업들을 손쉽게 관리할 수 있습니다.

  3. 데이터의 최신성 보장: useEffect를 통한 상태 관리에서는 data fetching 후, 최신의 데이터를 기반으로 작업을 수행하는 것이 보장되기 때문에, 예기치 않은 사이드 이펙트를 방지할 수 있습니다.

  4. 리덕스나 context와의 통합: 사실상 useEffect를 통해 상태 값이 변경될 때, 전역적으로나 다수의 컴포넌트에 영향을 주는 작업을 일관되게 처리할 수 있습니다. 이를 통해 코드의 일관성을 높일 수 있습니다.

전반적으로 useEffect를 사용하는 이유는 코드의 가독성과 유지 보수성을 높이며, 필요한 특정 상태 변경에 대한 구체적인 작업을 수행하기 위해서입니다.

관련 내용을 더 깊이 이해하시기 위해 유사 질문 답변 예시를 확인하시는 것도 좋습니다. 아래 링크도 참고하시기 바랍니다:
- react-query와 useEffect 사용 사례

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김효건님의 프로필 이미지
김효건

작성한 질문수

질문하기