10.06.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-17 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. useMemo는 배열 업데이트 시 특정함수를 실행시키기 위한 용도임

---

useMemo 훅을 사용하지 않으면 아래처럼 불필요할때에도 함수가 호출되어 자원 낭비되기 때문임.

아래 상황은 등록버튼을 눌러 user배열 값을 수정하지 않았는데 불필요한 countActiveUsers함수가 호출된 경우임.

이는 input값이 바뀔때에도 컴포넌트가 리렌더링 되기 때문임.

 

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

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

당연 input값을 수정할뿐 등록은 안했으므로 활성 사용자 수는 그대로임.

 

---

 

2.useMemo안에 deps배열 값의 변화 유무에 따라 useMemo안의 함수 호출 여부 결정함

---

사용법은 아래와 같음.

  const count = useMemo(() => countActiveUsers(users), [users]);
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
      <div>활성사용자 수 : {count}</div>
    </>
  );

결과는 아주 깔끔하게 값이 변경될때만 countActiveUsers 함수가 호출되는것 확인가능함.

 

---

 

3. useMemo와 useEffect의 용도 차이점을 알게됨

---

useEffect도 deps를 유무에 따른 함수 실행이 가능하다는 점 때문에 좀 헷갈렸음.

하지만 useEffect는 단순히 deps유무에만 의존하고, deps 배열값을 재사용하지 않음.

그리고 useEffect는 deps유무에 따라 마운트,언마운트, 추가로 deps의 안의 값 업데이트 직전에도 특정함수 호출 제어할 수 있음.

 

이에 반해 useMemo는 deps유무에 의존하지 않음. deps를 반드시 파라미터로 넣어줘야함.

deps배열값의 업데이트 상태에 따라 deps값을 재사용여부를 결정해 useMemo함수 안의 특정함수 호출을 제어함.

---