인프런 커뮤니티 질문&답변
작성한 질문수
RootNavigator 리렌더링 시점
작성
·
83
0
(너무 초보적인 질문이라면 죄송합니다 ㅠ.. 리액트 초보여서,,)
제가 알기로는 리액트에서는 컴포넌트 리렌더링 시점이 컴포넌트 함수를 직접 재호출하거나, 내부 state가 변경됐을 때로 알고 있는데요,
그런 개념을 가지고 코드를 살펴보면 RootNavigator에서 로그인 여부에 따라 분기처리를 하고 있는데, 여기서 내부 state를 가지고 있는 것도 아닌데, useAuth의 로그인이나 로그아웃 메서드 호출만으로 리렌더링이 되어서 스크린이 변경되고 있는데
어떻게 이 동작이 가능한건지가 궁금합니다.
리렌더링을 발생시키는 조건이 궁금합니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 김효건님.
리액트 컴포넌트의 리렌더링 조건에 대해 궁금하신 점을 이해합니다. 리액트에서 컴포넌트가 리렌더링되는 기본적인 이유는 주로 아래와 같은 경우입니다:
- Props의 변화: 부모 컴포넌트로부터 전달받은 props가 변경되면 컴포넌트는 리렌더링됩니다.
- State의 변화: 컴포넌트 내에서 관리하는 state가 변경되면 리렌더링이 발생합니다.
- Context의 변화: 리액트의 Context API를 사용할 때, Context의 값이 변경되면 이를 소비하는 컴포넌트가 리렌더링될 수 있습니다.
RootNavigator에서 로그인 여부와 관련된 부분이 useAuth 훅을 통해 관리되고 있습니다. 이 훅은 리액트 쿼리(React Query)를 활용하여 상태를 관리하게 되는데, React Query는 내부적으로 전역 상태처럼 관리하며, 사용되는 쿼리가 업데이트될 때 자동으로 컴포넌트를 리렌더링 합니다.
useAuth 훅 내에서 쿼리의 성공 또는 실패에 따라 isLogin 상태가 결정됩니다. 즉, React Query의 쿼리 상태 변화가 RootNavigator의 리렌더링을 유도합니다. 이는 React Query가 데이터 fetch와 관련된 상태를 관리하면서, 데이터가 변경될 때 관련된 컴포넌트가 자동으로 리렌더링되도록 설계된 특징입니다.
리액트 쿼리와 같은 라이브러리를 사용하여 상태 관리를 더 효율적으로 처리할 수 있으며, 이러한 상태 관리 패턴은 이상적인 구조를 유지하면서도 코드 유지 보수를 원활히 하는 데 도움을 줍니다.
유사한 사례나 더 깊이 있는 이해를 원하시면 아래 URL을 참고해보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.