👉🏻 React Hook

✍🏻 useCallback

함수 안에서 사용한 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재새용한다. 함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다.
useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다.
함수가 새로 만들어지는 것이 성능을 떨어트리지는 않지만,
컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수를 재사용하는 것이 필요하다.

const onCreate = useCallback(() => {
    const user = {
        id: nexId.current,
        username,
        email,
    }
    setUsers(users.concat(user));
    // setUsers([...users, user]);
},[users,username,email])

기본형태
useCallback(function,deps)

• function : 재사용 할 함수
• deps : 검사할 특정 값을 담은 배열

---

✍🏻 useHistory, useLocation, useParams

우리가 1차 프로젝트때 사용했던 props와 유사한 hook이다.
2차플젝때는 hook으로 사용하면 편할 것 같아 알아보았다.

✅ useHistory

props를 통해 받던 history를 한줄의 함수로 받을 수 있다.

const Home = (): JSX.Element => {
  const history = useHistory();
  // history를 props에서 얻어왔을 때 처럼 동일하게 사용 가능하다.
  
  return (
    <div onClick={() => history.push('/auth')}>
      <div>Hello!</div>
    </div>
  );
};

export default Home;
// withRouter hoc가 필요없다.

✅ useLocation

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hook이다

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = (): JSX.Element => {
  const location = useLocation();
  console.log(location);
  
  return (
    <></>
  );
}

export default Home;

위 코드에서 console을 찍어보면, pathname과 search라는 객체을 알 수 있다.

pathname은 만약 웹 url이 http://localhost:3000/home?keyword=리액트 이라고 가정했을때, 쿼리스트링을 제외한 /home이 출력 된다

search는 쿼리스트링을 분석해야하는 상황에서 유용하다. 앞에서 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며, 결과는 ?keyword=리액트 라는 출력결과가 나온다. 출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 제대로 된 값을 얻어낼 수 있다.

import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Home = (): JSX.Element => {
  const { search } = useLocation();
  // search: ?keyword=리액트
  
  const { keyword } = queryString.parse(search);
  // keyword 출력결과: "리액트"
  
  return (
    <></>
  );
}

export default Home;

✅ useParams

useParams는 path parameter의 정보를 얻을 수 있는 hooks이다.

기존에는 match props를 이용하여 match.params.id의 형식으로 접근을 해야 했지만, useParams를 이용하면 좀 더 간단하게 접근 가능하다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
  
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
  
  return (
    <></>
  );
};

export default Home;