231220_TIL : 리액트 페이지 이동, 함수 호출과 참조 전달, lazy 문법

1. react-router-dom 페이지 이동하는 방법

리액트 라우터에서 페이지를 이동하는 방법으로는 Link, useNavigate,  NavLink 이렇게 세가지가 있다.

 

1) Link

링크 태그를 사용하여 to에 이동할 주소를 넣어줘서 페이지를 이동할 수 있다.

이 링크 태그는 <a>와 유사하여 사용 시 텍스트가 파란색으로 변하고 밑줄도 생긴다.

참고로 a태그는 페이지를 아예 새로 가져오는 방식이지만(새로고침 되는 식)

링크태그는 spa의 일부로 새로고침되지 않도록 하여 페이지를 전환한다.

<Link to="/">홈</Link>

 

2) useNavigate

useNavigate 훅을 실행하면 페이지를 이동하는 함수를 반환한다.

이 반환받은 함수의 인자로 경로를 넣어주면 해당 페이지로 이동할 수 있다.

Link 태그와 다른 점은 페이지 이동 외 추가적인 작업을 더 하고싶을 때 함수를 만들어 이 navigate작업외 다른 작업을 더할 수 있다는 것이다.

const navigate = useNavigate();

{shoes.map((item) => (
  <Card key={item.id}
        title={item.title}
        price={item.price}
        onClick={() => navigate(`/detail/${item.id}`)}
  />
))}

 

* 주의점 : 컴포넌트에서 onClick으로 navigate를 사용할 때는 이벤트를 주는 컴포넌트에서 onClick을 props로 받아야한다. 그냥 부모컴포넌트에서 냅다 온클릭이벤트를 수행해라! 일케 할 수 없음.

왜 그럴까?

이전에 리덕스 툴킷을 사용할 때 리덕스로 받은 데이터를 변경할 때, 사용하는 컴포넌트에서 직접 수정하는 것이 아니라 해당 store에 state변경함수를 만들고 컴포넌트는 그 함수를 요청하는 방식을 사용했었는데, 그런 느낌이 아닐까 싶다.

이벤트 처리를 부모컴포넌트에서 직접하는 것이 아니라 이벤트 처리 로직은 부모컴포넌트에서 정의하고, 자식컴포넌트에 그걸 전달해서 컴포넌트관리나 에러 발생시 좀 더 수월하게 작업할 수 있어서 그런 것 같다.

그리고 이렇게 하는 것이 이 카드 컴포넌트를 다른 곳에서 또 다른 이벤트를 설정하여 사용할 수 있다는 장점도 있다.

 

3) NavLink

NavLink는 특정 링크에 스타일을 적용할 수 있다.

사용방법은 아래 포스팅 참조하시길..

[새싹 프론트앤드] react 메뉴 클릭 시 글자 색 변경 유지하기(NavLink)

 

 

2. 함수 직접 호출과 함수 참조를 전달하는 것에 차이

//함수 직접 호출
onClick={clickHandler(item.id)}

//함수 참조 전달
onClick={() => clickHandler(item.id)}

 

 

clickHandler라는 함수를 만들어서 클릭시 함수가 수행되도록 하고싶었는데, 처음에 함수 직접호출로 작성했더니 동작하지 않았고, 참조를 전달하는 방식으로 했더니 수행되었다.

개발을 할 때 이 부분이 가끔 헷갈렸었는데 이번에 정리를 하고자 한다.

 

1) 함수 직접 호출

함수 직접 호출은 클릭이벤트와 상관없이 렌더링할 때마다 함수가 실행된다. 

함수가 호출되고, 클릭했을 때의 응답으로 수행된 함수의 반환값을 얻을 수 있다.

 

2) 함수 참조를 전달

함수 참조를 전달하는 방식은 클릭이벤트가 발생했을 때만 실행되는 것이다.

그리고 반환값은 여기서는 무시된다.

 

이벤트가 발생할 때만 함수가 실행되는 작업은 함수 참조를 전달하는 방식으로 작성해야한다!!

 

 

3. Lazy 문법

리액트는 spa이다. spa는 html, js파일이 하나만 생성되는데, 프로젝트 모든 내용이 하나의 파일에 다 들어가므로 파일의 사이즈가 크다. 그래서 리액트의 첫 페이지의 로딩속도가 느릴 수 있다는 단점이 있다.

 

이때 이 첫페이지 로딩 속도를 좀 줄이고 싶다면 lazy 문법을 사용할 수 있다.

첫페이지에 필요하지 않은 컴포넌트는 나중에 import 해오도록 하는 건데 아래와 같이 사용할 수 있다.

// import Detail from "./page/Detail.jsx";
// import Cart from "./page/Cart.jsx";

//현재 렌더링 되지 않는 페이지들은 이렇게 import해오면 해당 컴포넌트를 출력할 때 import해온다
//첫 페이지 속도를 향상시킬 수 있으나 해당페이지를 들어가려고 하면 좀 시간이 걸림
//지연시간에 <Suspense>컴포넌트 사용하여 로딩 중일 때 페이지 만들어서 보여주기
const Detail = lazy(() => import("./page/Detail.jsx"));
const Cart = lazy(() => import("./page/Cart.jsx"));


<Suspense fallback={<div>로딩중</div>}>
  <Routes>
    <Route path="/" element={<Home/ >} />
    <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
    <Route path="/cart" element={<Cart />} />
    <Route path="/event" element={<Event />} />
  </Routes>
</Suspense>