useNavigate

react에서 Client Side Routing을 편리하게 사용할 수 있도록 돕는

"react-router-dom"에서 제공하는 훅으로 react에서 주로 페이지를

동적으로 이동할 때 사용되는 훅이다. Link 태그와 다르게 훅으로서

함수와 함께 사용 가능하기 때문에 다양하게 활용 가능한 것이

특징이다.

useNavigate 사용예시

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

// 로그인 페이지로 이동
navigate("/login");

// 이전 페이지로 이동
navigate(-1);

기본적인 사용 예시는 위와 같다.

단순하게 Route의 pathName을 기재하는 것 뿐아니라
이전 페이지로 가는 경우 -1을 매개변수로 넣는 등

다양한 기능을 제공한다.

이동할 페이지에 State 전달

react에서 useState의 setState를 활용하여 state를 값을 얻는 방법 외

useNavigate의 state option을 사용하면 페이지로 이동 후

이동한 페이지에서 useLocation 훅을 통해 state를 전달 받는 것이 가능하다.

이러한 기능을 활용한다면 URL 파라미터에 값을 노출시키지 않고

특정 값을 private하게 전달해 줄 수 있다.

Navigate State 사용예시

/** current.jsx */
import { useNavigate } from 'react-router-dom';

export const current = () => {
  const navigate = useNavigate();

  const linkToNext = () => {
    // next 페이지로 이동하며 { state: fromCurrentPage } 전달
    navigate("/next", { state: { fromCurrentPage: "Hello, Next page?" } });
  }
    
  return <div onClick={linkToNext}> currentPage </div>
}



/** next.jsx */
import { useLocation } from 'react-router-dom';

const Next = () => {
  const location = useLocation();
  
  // "Hello, Next page?"
  console.log(location.state.fromCurrentPage);
  
  return <div> Filnally... Next Page! </div>
}

마치며...

약 2년간 react 를 주력으로 다뤄왔지만 useNavigate를 활용해서 다음 페이지로 state를 전달할 수 있다는 사실을 이번에 처음알게되었다... 다시금 부족함을 느끼고 멈추지 않고 꾸준히 정진해야겠다는 마음을 굳게 다지는 계기가 되었다.

React

Facebook에서 개발된 오픈소스 라이브러리이며

CSR 웹페이지를 개발할 때 주로 사용된다. 컴포넌트 단위로

개발할 수 있어 유지보수, UI 재사용성을 높여 효과적으로 웹페이지를

개발, 운영할 수 있다.

React의 주요 특징

1. Virtual DOM, 동적인 웹페이지 구성

React는 메모리에 Virtual DOM(가상돔)을 생성하고 이를 활용하여 이벤트가 발생할 때 마다 실제 DOM과 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영하여 렌더링되기 때문에 렌더링 효율성이 좋다. 이러한 특징으로 유저와 상호작용하는 동적인 웹페이지 개발 시 자주 채택된다.

2. Data Flow

Data Flow(데이터 방향)는 한 방향으로 흐르는 단방향이다. 데이터흐름이 양방향인 경우 어플리케이션의 규모가 커질 수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경우가 발생한다. 이와 달리 단방향으로 개발된 어플리케이션은 데이터를 추적하기 수월하고 변화에 대한 예측이 가능하여 디버깅이 쉬운 장점이 있다.

3. JSX를 활용한 컴포넌트 개발

React를 사용할 때 필수적인 요소는 아니지만 보편적으로 필수적 요소처럼 사용되고 있다. 개인적인 견해로 JSX를 활용하였을 때 가장 큰 장점으로는 "개발의 생산성의 증대"라고 생각한다. JS코드내에서 즉시 UI구현 작업이 가능하고 가독성 또한 좋아지기 때문이다.

4. Props & State

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미하며 readonly 타입의 데이터이다. props는 변경이 불가능한 불변데이터이고 props를 전달해 준 최상위 부모 컴포넌트에서만 props를 변경할 수 있다.

State는 컴포넌트 내부에서 선언하여 값을 변경할 수 있어 동적인 데이터를 다룰 때 주로 사용된다. 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용되며 각각의 state는 독립적인 데이터이다.

5. Hooks

React가 함수형 컴포넌트를 표준으로 제공하면서 생긴 개념으로, React state와 Life cycle을 연동할 수 있게 해주는 함수를 뜻한다. 대표적으로 useState, useEffect, useCallback, useMemo 등이 있다.

마치며...

지금 껏 개발에 대한 포스팅을 해오며 돌이켜 생각해보면 react훅을 제외하면 나의 주력인 react에 관한 포스팅이 단 하나도 없다는 것이 조금 놀라웠다. 기술에 대한 이론적 역량을 보완하기 위해 react의 개념을 복기하며 포스팅하였고 알고 있더라도 포스팅을 하고 안하고의 차이는 꽤 크니 앞으로 꾸준히 노력하며 포스팅해야겠다.