useMemo Hook

useMemo(func, [deps]);

• 주로 성능을 최적화해야 하는 상황에서 사용한다.
• 특정 값이 바꼈을 때에만 특정 함수를 실행시켜서 불필요한 실행을 막는다.
• deps가 바뀔 때에만 함수(func) 호출

App.js

function countActiveUsers(users) {
  console.log("활성 사용자 수를 세는 중..");
  return users.filter((user) => user.active).length;
}

function App() {
  const count = countActiveUsers(users);
  
  const [inputs, setInputs] = useState({
    username: "",
    age: "",
  });

  const { username, age } = inputs;

  const [users, setUsers] = useState([
    { id: 1, username: "bae", age: 22, active: true },
    { id: 2, username: "lee", age: 21, active: false },
    { id: 3, username: "lim", age: 25, active: false },
  ]);
    
  const nextId = useRef(4);
  const onChange = (e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  /* ... */ 
  
  return (
    <>
    	<CreateUser 
    	  username={username} 
	  age={age} 
	  onChange={onChange} 
	  onCreate={onCreate} 
	/>
    <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    <div>활성 사용자 수 : {count}</div>
    </>
	);

• 컴포넌트가 리렌더링 될 때마다 활성 사용자(active) 수를 계산하여 업데이트한다.
• 그런데 useState로 input 상태를 관리하기 때문에 onChange 이벤트가 발생하면 컴포넌트는 리렌더링된다.
• 따라서 input에 컴포넌트가 추가될 때에도 활성 사용자 수를 계속 계산하게 된다. (불필요한 상황)

App.js

/* ... */

function App() {
  const count = useMemo(() => countActiveUsers(users);, [users]);
  /* ... */
}