[React] React Router의 useNavigation 훅 - state와 주요 속성

useNavigation

 

이 훅은 페이지 탐색에 대해 알아야 할 모든 것을 알려주어 보류 중인 탐색 표시기와 데이터 변이에 대한 최적화된 UI를 구축할 수 있습니다.

 

• 글로벌 로딩 표시기
• 변경이 발생하는 동안 양식 비활성화하기
• 제출 버튼에 사용 중 표시기 추가하기
• 서버에서 새 레코드가 생성되는 동안 새 레코드 상태를 낙관적으로 표시하기
• 업데이트되는 동안 레코드의 새 상태를 낙관적으로 표시하기

 

1. navigation.state

 

 현재 네비게이션 상태를 나타내는 속성입니다.

3가지 상태 값 중 하나를 반환한다

• "idle" - 기본 상태, 현재 네비게이션이 진행되지 않고 있음
• "loading" - 데이터를 불러오는 중이거나 페이지 전환이 진행 중
• "submitting" - 폼 제출과 같은 데이터 변경 작업이 진행 중

 

보통의 네비게이션이나 get 폼 제출인 경우 flow

idle → loading → idle

 

POST, PUT, PATCH, or DELETE 을 통한 폼 제출

idle → submitting → loading → idle

 

활용법

function RootLayout() {
  const navigation = useNavigation();
  // ... existing code ...
  const isLoading = navigation.state === 'loading';
  
  return (
    <>
      <MainNavigation />
      <main>
        {isLoading && <p>로딩 중...</p>}
        <Outlet />
      </main>
    </>
  );
}

 

 

 

 

참고 : react router  공식문서

https://reactrouter.com/en/main/hooks/use-navigation#navigationstate

useNavigation | React Router

 

 

2.  navigation.location

• 현재 진행 중인 네비게이션의 대상 위치 정보를 담고 있습니다
• 네비게이션이 진행 중이 아닐 때는 null을 반환합니다
• pathname, search 파라미터 등의 정보를 포함합니다

if (navigation.location) {
  console.log('이동할 경로:', navigation.location.pathname);
}

 

 

3. navigation.formData

• 제출된 폼 데이터를 FormData 객체로 제공합니다
• 폼 제출이 없을 때는 null을 반환합니다

if (navigation.formData) {
  const formValues = Object.fromEntries(navigation.formData);
}

 

4. navigation.json

• 요청 본문이 JSON 형식일 때 파싱된 데이터를 제공합니다
• JSON 데이터가 없을 때는 null을 반환합니다

 

5. navigation.text

• 요청 본문의 텍스트 데이터를 제공합니다
• 텍스트 데이터가 없을 때는 null을 반환합니다

 

6. navigation.formAction

• 현재 제출 중인 폼의 action URL을 나타냅니다
• 폼 제출이 없을 때는 undefined를 반환합니다

 

7. navigation.formMethod

• 현재 제출 중인 폼의 HTTP 메소드를 나타냅니다 (GET, POST 등)
• 폼 제출이 없을 때는 undefined를 반환합니다

 

8. navigation.formEncType

 

• 폼 데이터의 인코딩 타입을 나타냅니다
• 일반적인 값: application/x-www-form-urlencoded, multipart/form-data
• 폼 제출이 없을 때는 undefined를 반환합니다

function RootLayout() {
  const navigation = useNavigation();
  
  // 폼 제출 중일 때의 처리
  if (navigation.formData) {
    console.log('제출된 데이터:', Object.fromEntries(navigation.formData));
    console.log('제출 메소드:', navigation.formMethod);
    console.log('제출 URL:', navigation.formAction);
  }
  
  // 페이지 전환 중일 때의 처리
  if (navigation.location) {
    console.log('이동 중인 경로:', navigation.location.pathname);
  }

  return (
    // ... 기존 코드 ...
  );
}

 

1. 폼 제출 진행 상태 표시
2. 페이지 전환 애니메이션 구현
3. 데이터 로딩 상태에 따른 UI 처리
4. 사용자 입력 유효성 검사

등의 용도로 주로 사용되며  state, location, formData 순으로 주로 사용됩니다