props.history.push - state

const nextHandler = () => {
    props.history.push({
      pathname: "/request",
      state: { ...state },
    });
  };

• 버튼을 눌렀을 때 onClick 이벤트에 nextHandler라는 함수가 실행 되도록 했다.
  그리고 위의 방법 처럼 nextHandler 함수에 props.history를 이용해 Input 태그에서 입력 받은 값을 state로 넘겨줄 수 있다.

useCallback

처음에는 아래와 같이 useCallback 함수를 사용했는데, 저장 된 값을 제대로 보내지 못했다.
다음 단계인 창에서 state 값을 확인 했는데 초기화 된 값을 확인 할 수 있었다.

const nextHandler = useCallback(() => {
    props.history.push({
      pathname: "/request",
      state: { ...state },
    });
  }, []);

• useCallback은 useMemo와 비슷한 Hook이다.
• useMemo는 특정 결과값을 재사용 할 때 사용하고, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.

함수를 선언하는 것 자체는 메모리나 CPU, 리소스를 많이 차지 하는 작업은 아니기 때문에 함수를 새로 선언하는 것이 속도가 느려지거나 하는 것은 아니다.
하지만 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 중요하다.