혜르미온느

useMemo는 변수에 사용되고, useCallback은 함수에만 사용되는줄 알았던 나는 useCallback을 사용한 곳에 useMemo를 사용하라는 코멘트를 받게된다...! 뭐야 함수라서 useCallback을 사용했는데, useMemo가 더 잘 어울린다니. 이게 더 다른게 있는거야?!?! 라고 하여 생각한 심화학습- react는 초기 useMemo를 먼저 만들고, 추후에 함수 전용으로 useMemo를 카피한 useCallback을 만든것이기 때문에 useMemo에서도 함수를 사용할 수 있다. 다만, useMemo는 함수를 실행시킨 후, 리턴값을 저장하는 구조이기 때문에 함수 실행 시점 자체를 뒤로 미루는 것을 추가한게 useCallback. 고로 useMemo가 변수 전용은 아니며, 변수/함수 둘 ..

(이 포스팅까지 흘러 들어왔다면 자바스크립트에 대하여 아주 얕게라도 안다는 기준 하에-) 스크립트를 짜다보면 컴포넌트를 만들어 사용성을 높이는 코드를 굉장히 많이 고민하게 된다. 컴포넌트를 호출하게 되면 하위(자식) 컴포넌트들도 함께 호출하게 되는데, 문제는 여기에서 시작된다. 내가 컴포넌트 내에세 하나의 상태 값을 변경하였을 때, 함께 온 자식 컴포넌트들까지 모두 랜더링 되는 상황이 발생하기 때문이다. 이렇게 되면 불필요한 랜더링의 반복으로 의도하지 않은 메모리 과사용 등 여러 문제가 발생하게 된다. 이렇게 의도하지 않은 상황을 막고자 처리하는 방법이 바로 useMemo와 useCallback Hook의 사용이다. 이 둘은 비슷하면서 다르기 때문에 많이 비교된다. useMemo const memoize..