useMemo

📌 useMemo

참고 주소

https://react.vlpt.us/basic/17-useMemo.html

✏️ 연산값 재사용

useMemo는 성능 최적화를 위하여 연산된 값 재사용하는 hook 이다.

예시

유저 이름을 클릭하면 active 값을 true 로 바꿔 글자색을 변화시키는 펑션을 만들어 본다.

import React, { useMemo, useRef, useState } from "react";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

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

function UseMemo() {
  const [inputs, setInputs] = useState({
    username: "",
    email: "",
  });
  const { username, email } = inputs;
  const onChange = (e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
      active: true,
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
      active: false,
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
      active: false,
    },
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    setUsers(users.concat(user));

    setInputs({
      username: "",
      email: "",
    });
    nextId.current += 1;
  };

  const onRemove = (id) => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter((user) => user.id !== id));
  };
  const onToggle = (id) => {
    setUsers(
      users.map((user) =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };
  const count = countActiveUsers(users);
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
      <div>활성사용자 수 : {count}</div>
    </>
  );
}

export default UseMemo;

const count = countActiveUsers(users);

이부분인데 count 값이 변하지 않아도 input에 onChange 메서드만 발동되도 계속 호출된다.

값이 변하지 않을때 호출하지 않게 바꿔주는게 useMemo 이다.

const count = useMemo(() => countActiveUsers(users), [users]);

바꿔주면 count 값이 변할때만 호출하게됨 count를 state로 만들면 해결되지만 그렇게 하지않는 경우도 있기에

useMemo가 사용됨

useMemo 의 첫번째 인자에는 연산할 함수 두번째 인자 deps 배열

이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용

예시 주소

https://github.com/moonjh9392/hooks