[0520] React Router

피카츄 놀이터 최적화

useMemo

// 잔디는 useMemo를 사용하여 리렌더링을 막는다.

컴포넌트를 분리하는 이유

1. 재사용
2. 응집성 / 가독성 높이기
3. 불필요한 리렌더링 막기 (state가 꼭 필요한 곳에 있도록)

피카츄는 동적이고 앱은 정적인데 앱에서 모든 것을 처리하면 최상단인 앱이 계속 리렌더링 되는 문제가 발생한다.
피카츄 컴포넌트를 분리하고 state 값을 피카츄에만 넣으면 앱은 처음에만 렌더링되고 피카츄만 계속 리렌더링 된다. 최적화!

React Router

클라이언트 사이드 라우팅.
서버로부터 파일을 받아오는 것이 아니라 자바스크립트로 다르게 그려줌.

라우팅: 어떤 경로에 대해서 무슨 일을 해줄지 맵핑해주는 것 (key-value 쌍)
path가 "/"일 때, element: <div>Hello</div>를 보여준다.

Router 6 부터는 createBrowserRouter 함수를 이용하여 맵핑해주는 것이 좋다!

동적 라우팅

path: "/posts/:postId"
매개변수 param 이름 앞에 : 콜론을 적어준다.
useParams()를 이용하여 param 값을 가져올 수 있다.

추가 기능 loader

페이지가 불러오기 전 단계에서 실행할 함수를 지정해줄 수 있다.
값을 return 하면 useLoaderData 훅을 이용해서 그 값을 가져올 수 있다.
loader에서 param 값을 사용하고 싶을 때는 loader의 함수의 파라미터에 param 정보가 들어있다.

Layout 최적화

레이아웃 최적화가 안 되어있다면, 페이지가 바뀔 때마다 깜빡임이 발생할 수 있다.

Layout을 분리하는 이유
1. 공통 UI 구성
2. 공통된 비지니스 로직 처리 (ex. 로그인 여부 확인)

Layout에서는 children이 아니라 outlet을 사용한다.

useEffect

컴포넌트의 생애주기(mount, update, unmount)와 의존성 배열에 담긴 값의 변화에 따라 함수를 실행해 주는 훅

useEffect(() => {
  console.log('mounted');
  return () => {
   	console.log('unmounted');
  }
}, []);

useEffect의 첫번째 인자인 콜백함수는 async일 수 없다. 그렇다면 어떻게 할까

useEffect(() => {
  (async () => {
    const url = "https://jsonplaceholder.typicode.com/posts";
    const response = await fetch(url);
  })();
});

async로 함수를 묶어주고 즉시 실행해준다.

+) 자동 완성 : RFC

rfc로 자동 완성하면 자동으로 기본 함수 컴포넌트가 만들어진다 핵꿀팁!!