React] Hook : useCallback & useMemo 언제 사용해야 될까?

useCallback & useMemo 언제 사용해야 될까?

두 개의 hook에 대해서 다시 한번 다뤄보려고 합니다.

두 hook은 메모이제이션 되니깐 함수나 결과값이 있는 거에 전부 사용하면 좋지 않을까??라는 생각을 할 수 있을 것입니다.

그런 생각에 성능 좋아지겠지 하고 사용하다 보면 되려 성능저하가 될 수 있습니다.

왜냐면 결국 메모이제이션하는데에도 그만한 비용이 들기 때문입니다.

그렇기에 언제 쓰고, 언제 쓰면안좋은지에 대해 작성하려고 합니다.

 

 

---

 

 

❌사용하지 말아야 하는 경우

• 복잡하지 않은 연산에 사용하는것은 오히려 메모리 낭비입니다.
  onClick이벤트로 setState해주는 경우 같이 단순한 상황이라면, 리렌더링 된다고 하더라고 다시 그려주는 편히 훨씬 낫다고 볼 수 있습니다.
  React에서도 충분히 최적화가 이루어져 있기 때문에 useState나 useDispatch에 대한 성능 최적화는 이미 적용되어 있다고 합니다.

const onClick = useCallback((value) => setState(value), []);

 

• 의존성 배열에 신경 써야 됩니다.
  useCallback이나 useMemo 내부에서 사용하지 않는 props를 의존성부여하게 되면, 사용하는 의미가 없어진다.
• 너무 자주 바뀌는 값에 의존성을 부여할 때도 사용하지 말아야 합니다.
  의도적으로 매번 새로운 함수나 값을 계산해야 한다면 굳이 사용할 필요 없습니다.
• 리렌더링 관련이 없는 컴포넌트라면 굳이 사용할 필요가 없습니다.
  결국 리렌더링 할 때 효율적으로 렌더링 하려는 것이기 때문에..

 

 

---

 

 

👍사용해야 하는 경우

• 사용될 함수 내용이 복잡하거나 많을 경우 사용하시면 됩니다.
• porps로 함수를 넘길 때, 불필요한 렌더링이 일어난다고 판단되면 사용합니다.
• 반복문을 사용할 때, 결과값을 보고, 동일할 가능성이 높다면 useMemo를 사용하시면 됩니다.
• 부모 컴포넌트에서 리렌더링이 일어났을 떄, 자식 컴포넌트에 일어나지 않았으면 할 떄 사용하시면 됩니다.

 

 

---

 

 

 

최대한 성능 좋고 효율적으로 작성하려다가 오히려 독이 될 수 있습니다.
해당하는 hook들을 사용할 때, 의도와 결과를 명확하게 하고, 생각한다면 보다 나은 코드를 작성할 수 있을 것입니다.

저는 잘 못하고 있는데... 다음 프로젝트 하게 되면 좀 더 효율적으로 잘 짜봐야 될 듯싶습니다.