Router - useNavigate( )와 Link 태그

Router의 re Rendering을 잡기 위해선??

요약

useNavigate Hook을 사용하기 보단, Link 태그를 사용하는건 어떠쇼

Link와 useNavigate 기초지식

1. Link

• 클릭시 원하는 Route path경로로 이동됨

• 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장)

• 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포넌트에 설정되어 있는 state 등이 모두 날아감이라는 문제점을 해결 할 수 있다.

• Link를 사용한 경우에는 렌더링 된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있음

• <Route> 에 지정된 컴포넌트를 렌더링

useNavigate

• 특정 조건시 페이지 이동하고 싶으면 사용하는 Hook

---

문제 발생!!!!

// Routes
<Layout>
  <Routes>
    <Route path="/" element={<Home />} />
      // Deatail page
    <Route path={`detail/:member/:id`} element={<Detail />} />
      
    <Route path="*" element={<h1>404 찾을수 없으셈</h1>} />  
  </Routes>
</Layout>

// Layout.jsx
function Layout( {children} ) {
<Header/>
  {children}
<Footer/>
.
.
.
	}
// Header.jsx
function Header ( ) {
  const navigate = useNavigate();
  
  <St.LayoutLogoContainer onClick={() => navigate("/")}>
  
}

Header 부분에 왼쪽 상단의 로고를 클릭하면 메인 화면으로 라우팅 되게 처리를 하였다.

그런 다음 comment를 누르면 Detail page로 이동하게끔 useNavigate()를 이용 하여 코드를 짜고

Detail만 mount가 되어야 하는데

Header 부분도 다시 re-rendering이 된다....

원인을 찾아보니

원인은...

useNavigate를 사용한 각 컴포넌트에서는
route의 페이지 이동 처리가 되면 useNavigate Hook님께서 새롭게 페이지 이동 처리가 되었다고 받아들여져 useNavigate가 선언 후 사용되는 곳 모두다 렌더링이 된다.

해결방법을 찾다가...

Link 태그를 사용해보면 어떨까 하고 사용 해보니

Header가 re rendering이 안되는것을 확인 하였다.

Link태그는 단지 지정된 routing페이지를 리렌더링만 일으키는 것이라고 위에 썼다 싶이

지정된 routing페이지만을 리렌더링 해주는 존재이다.

회고

Link와 useNavigate() 각각의 쓰임새에 관하여 조금은 "체감"한 것 같은 기부니가 든다.

• Link는 단지 페이지이동

• useNavigate( )는 특정 "조건" 속에서 사용