비전공자의 공부일지 - React Router Dom, useDebounce

오늘은 어제 하던 디즈니플러스 앱을 마무리하려고 한다.

요즘 재밌게 보고 있는 유튜브가 있는데 asmr처럼 말없이 키보드 소리만 들리는 유튜브인데 꽤 재미있고 javascript에 대해 도움도 많이 되는 거 같다. 

심심 할 때 한 번씩 보면 좋을 거 같아요. 나름 꽤 도움도 되고 재밌더라고요

 

1. React Router Dom

---

Router란 네트워크가 서버에서 사용자에게 까지 전송되는 네트워크의 경로를 최적화해서 해당 경로를 선택해서 우리에게 알려줌

https://www.cloudflare.com/ko-kr/learning/network-layer/what-is-routing/

 

위의 링크로 접속하시면 상세한 정보를 얻을 수 있음

 

하지만 간단하게 생각하면 우리가 url를 요청하면 해당 페이지를 보여 주는 것이라 생각하면 된다.

리액트에서 제일 많이 사용되는 React Router는 사용자가 요청한 url이 어떤 내용이 확인해 해당 페이지를 보여주는 역할을 한다. 그런데 SPA 즉 Vue, Anguler, React에서는 기존 우리가 알던 웹사이트와 다르게 싱글페이지이니깐 페이지 새로고침 없이 바로 다른 컴포넌트를 불러오기 때문에 사용자 입장에서는 기존 홈페이지들과 다르게 훨씬 빠르다고 느낄 수 있다. 하지만 SPA의 단점도 있을 것 같은데 그 부분은 추후 SPA에 대해 자세히 알아봐야겠다.

 

해당 라이브러리를 사용하면 리액트에서 조금 더 편하게 페이지 이동작업을 수행할 수 있다.

만약 React Router Dom을 사용하지 않고 직접 라우터를 구성한다고 하면

 

이런 식으로 라우터의 기능들을 직접 만들어서 사용해야 된다.

하지만 매번 이렇게 다 작업할 순 없으니 라이브러리를 사용하게 되면

 

이렇게 라우트를 불러와 path와 element만 선언해주면 된다. 

path:주소

element: 해당 Url일시 불러올 컴포넌트

우리가 복잡하게 작업할 필요 없이 컴포넌트를 만들고 해당 주소에 맞게 설정만 함으로써 엄청 편리해진다.

 

작업하다 path를 알아야 될 때는 

  const { pathname } = useLocation();

useLocation이라는 React Router Dom의 내장 객체인 useLocation를 불러온 후 useLocation에서 pathname를 가져오면 된다.

 

그럼 현재 페이지의 path가 어떤 건지 알 수 있다.

 

특정 이벤트에서 페이지를 이동시켜야 될 때는 

  const navigate = useNavigate();

  const handleChange = (e) => {

    setSearchValue(e.target.value);

    navigate(`/search?q=${e.target.value}`)

  }

이번에도 React Router Dom의 내장 객체인 useNavigate를 불러와 이렇게 페이지를 이동시킬 수 있다.

현재는 input에 텍스트를 입력 시 search페이지로 이동하는 이벤트를 작성하였다.

 

 

2. useDebounce

---

useDefounce란 우리가 검색을 하기 위해 input에 텍스트를 입력 시 onchage를 이용해서 value를 전달하는데 그렇게 되면 한 글자씩 api요청하게 되어 불필요하게 많은 양의 api를 요청하게 된다. 그런 걸 방지하기 위해 useDebounce라는 custom Hooks를 만들어 해당 문제를 해결할 수 있다. useDebounce는 라이브러리가 아니라 우리가 hook을 만들어 사용하면 된다.

https://ko.legacy.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

hook에 관한 내용인데 참고하면 좋을 거 같다.

 

import { useEffect, useState } from "react";

export const useDebounce = (value, delay) => {

    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {

        const handler = setTimeout(() => {

            setDebouncedValue(value);

        }, delay);

        return () =>{

            clearTimeout(handler)

        }

    },[value, delay])

    return debouncedValue

}

간단하게 작성한 debounce hook이다.

vlalue, delay를 받은 후 state에 전달받은 vlaue를 기본 값으로 넣은 후 useEffect에서 value와 delay값을 받을 때마다 실행 setTimeout을 실행하게 만들고 debounceValue를 바뀐 value값으로 변경한다. 그리고 value가 바뀌었으니 이전 effect는 제거되어야 하므로 클리어를 먼저 하고 다시 handler이 실행됨으로써 setTImeout이 재실행된다.

이런 방식으로 간단한 debounce hook를 만들 수 있다.

 

 

아직 공부할 게 너무 많아 퍼블리셔에서 프론트로 제대로 이직할 수 있을까 하는 걱정이 너무 많이 든다..

파이팅 하자 아자!!