더 나은 코드 최적화를 위해 useReducer, useCallback, useMemo에 대하여 알아보자.

useReducer

React 공식 문서에 따르면 useReducer는 useState를 대체할 수 있다고 말한다.

useState

function Signin(){
	const [id, setId] = React.useState('');
    	return(
    	     <form>
  		 <h1>로그인</h1>
  		<input name="id" type="text" placeholder="아이디" value={id} onChange={e => setId(e.target.value)}  />
  		<input name="password" type="password" placeholder="비밀번호 입력" value={password} onChange={e => setPassword(e.target.value)} />
  	     </form>
    )
}

useState를 사용하면 위와 같이 두번 사용해야 한다.

이를 useReducer를 사용한다면?

useReducer

useCallback

import React from "react";
function App() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => console.log("clicked"), []);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>카운트 올리기</button>
      <button onClick={handleClick}> 클릭하기</button>
    </>
  );
}
export default App;

• 위 코드처럼 useCallback을 감싸면 이전에 생성한 함수를 저장해두고 재사용이 가능하다!
  함수의 동작은 똑같지만 좀 더 최적화가 좋다. 메모제이션 패턴을 이용한 것이며, 의존성 빈 배열로 두번째 인자에 넣는다.

• 의존성 빈배열을 명시하지 않는다면 제대로 인지하지 못하고 이전 값을 출력하므로 반드시, 의존성 빈배열을 명시해줘야함.

useMemo

• useCallback은 함수를 반환하는 반면, useMemo도 최적화에 사용되지만 함수가 아닌 값을 반환할때 쓰인다.

• 버튼을 클릭할때 두배로 계산한 값을 출력을 한다면,컴포넌트가 재렌더링 되었을 때, 불필요한 연산을 하게 되고 컴포넌트의 상태값이 많고 복잡한 연산의 경우?? 최적화가 좋지 않아 useMemo를 통해 최적화가 필요하다.

• 의존하는 값이 변경될 때에만 연산하므로 최적화가 개선되며,
  useCallback과 마찬가지로 두번째 인자 배열에 의존하는 값을 반드시 명시해야함.

정리를하며

useMemo는 상태값을 반환하고, useCallback은 함수를 반환하는 차이이다.
적절히 사용하면 컴포넌트 렌더링 최적화에 큰 도움이 되지만 주의할 점은 useCallback과 useMemo를 무분별하게 사용한다면, 이를 사용하는 코드와 메모제이션용 메모리가 추가로 필요하게 되므로 적절하게 사용해야한다.