useMemo vs useEffect

useEffect

useEffect(() => {aaa},[변화]])

• 변화가 생기면 aaa 를 자동으로 실행하기 위해 사용함
• 컴포넌트가 처음 랜더링 될 때 한번만 실행하고 싶은 경우 -> []안에 비워둠
• 리랜더링 될 때마다 실행하고 싶은 경우 -> [] 배열을 생략하면 됨
• setState를 사용하게 될 경우 -> 값이 변경되고 렌더링..변경되고 렌더링..변경되고 렌더링.. 무한루프의 늪에 빠지거나 쓸데없는 렌더링이 발생할 수 있음

useMemo

useMemo(() => {aaa}.[변화])

• useEffect와 비슷해 보이지만 useMemo의 []가 변하지 않는 이상 값을 기억(memorization)해줌 (쓸데 없는 리렌더링 방지할 수 있어 성능최적화에 적합)
  -> 그렇다고해서 남용하게되면 컴포넌트의 복잡도가 올라가 코드가 난해해지고 유지보수성이 떨어짐 (어딘가에 기억을 저장하고 있기에 점점 무거워짐)