[TIL] 성능 최적화를 위한 방법들 (useMemo, useCallback)

✨ 삼항 연산자는 만능이 아니다

• 중첩 삼항 연산자는 파악이 힘듦.
• 삼항 연산자의 요소가 길어질 때는 &&도 되지 않을까 한번 더 생각하자.
• 삼항 연산자가 false일때 null 이면 항상 &&연산자를 생각해보거나, 어쩌면 조건부 렌더링조차 필요 없을 수도 있다.

출처 : 프리온보딩 세션

---

🔑 useState 과도하게 사용하지 않기

1. state가 props를 통해 부모로부터 전달된다면
2. 시간이 지나도 변하지 않는다면
3. 컴포넌트의 다른 state 또는 props를 기반으로 계산할 수 있다면 state가 아니다.

참고 : https://www.zigae.com/useState-dont-over/

---

📷 useMemo

useMemo는 함수의 값을 pass
useMemo를 자식 컴포넌트에 props로 넘겨서 자식 컴포넌트에서 console을 찍어보면 넘겨받은 해당 함수의 값이 찍힘.
예를 들면 이런 식으로

useMemo에서 변하는 state를 업데이트해주려면 deps에 해당 state를 넣어줘야 함.
useEffect, useMemo, useCallback에서 deps가 새로운 값으로 바뀌면 업데이트됨.

useMemo를 사용한 경우하고 사용하지않은 경우하고 퍼포먼스 차이가 없다면 useMemo를 사용하지 않는것이 좋다.
useMemo는 페이지가 실행될때마다 콜되고 그결과로 생겨난 값을 기억해야 하기때문에 남용하게 된다면, JS가 기억해야 할 퍼포먼스가 너무 많아짐.
그래서 꼭 필요할때만 (퍼포먼스 혜택이 있을 경우) useMemo를 사용!

참고 : https://reactjs.org/docs/hooks-reference.html#usememo

참고 : https://www.youtube.com/watch?v=6H6KncvVc8s

참고 : https://www.youtube.com/watch?v=-fqYFpyjvZ4

---

📷 useCallback

useCallback은 함수 자체를 pass
useMemo를 자식 컴포넌트에 props로 넘겨서 자식 컴포넌트에서 console을 찍어보면 넘겨받은 해당 함수 자체가 찍힘.
예를 들면 이런 식으로

useCallback에서 변하는 state를 업데이트해주려면 deps에 해당 state를 넣어줘야 함.
useCallback은 함수 자체가 옮겨? 다니는 것이기에 argument도 추가하여 사용할 수 있음.
useEffect, useMemo, useCallback에서 deps가 새로운 값으로 바뀌면 업데이트됨.

useCallback을 필수로 적용해야 할 때 : 자식 컴포넌트에 props로 함수를 넘길 때
그렇지 않으면, 자식 컴포넌트에서 부모 컴포넌트의 데이터가 바뀌지 않아도 매번 리렌더링을 함.

참고 : https://reactjs.org/docs/hooks-reference.html#usecallback
참고 : https://www.youtube.com/watch?v=6H6KncvVc8s
참고 : https://www.youtube.com/watch?v=-fqYFpyjvZ4