[React] Hooks

ChatGPT로 React 공부하기!

통계에 따른 hook 사용 순위
1. useState
2. useEffect
3. useContext
4. useMemo
5. useCallback
6. useRef
7. useReducer
8. useLayoutEffect
9. useImperativeHandle
10. useDebugValue

1,2는 pass..

useMemo vs. useCallback

모두 성능 최적화를 위해 사용하는 React Hook, 차이점은 사용 용도!

useMemo

계산 비용이 높은 함수의 결과값을 저장해놓고, 해당 값이 변경되지 않으면 이전에 계산된 값을 재사용합니다. 이전에 계산된 값을 재사용함으로써, 불필요한 함수 호출을 방지하고 성능을 최적화한다.
= 계산 결과값을 캐싱하여 재사용

• useMemo는 내부적으로 자바스크립트의 Map 객체를 사용하여 캐시를 구현합니다. Map 객체는 키-값 쌍으로 데이터를 저장할 수 있는 자료구조로, 특정 키를 사용하여 값을 검색할 수 있습니다.
• useMemo는 함수의 결과를 계산한 후, 이전에 계산한 결과와 함께 해당 결과를 만들 때 사용된 인자를 Map 객체에 저장합니다. 다음에 동일한 인자로 함수가 호출될 경우, Map 객체에서 저장된 결과를 반환합니다.

useCallback

이벤트 핸들러 함수나, 부모 컴포넌트로부터 전달받은 콜백 함수를 재사용할 수 있도록 해주는 Hook입니다. 이전에 생성된 함수를 재사용함으로써(메모이제이션 기능), 불필요한 함수 생성과 리렌더링을 방지하고 성능을 최적화할 수 있다.
= 함수 자체를 캐싱하여 재사용

• 주로 이벤트 핸들러 함수나, 부모 컴포넌트로부터 전달받은 콜백 함수를 자식 컴포넌트에 props로 전달할 때 사용(자식-> 부모로 전달할 때도 사용 가능)

추가 용어

• 메모이제이션(Memoization)은 컴퓨터 프로그래밍에서 중복되는 계산을 피하기 위한 최적화 기법입니다. 메모이제이션은 이전에 실행한 함수 호출의 결과를 캐시(Cache)해두고, 동일한 인자를 가지는 함수 호출이 다시 일어날 경우 이전에 캐시해둔 결과를 반환함으로써 계산 비용을 줄이는 방법입니다.

• 캐시는 일반적으로 메모리에 저장됩니다. 함수의 인자와 결과를 쌍으로 저장하는 자료구조를 사용하여 캐시를 구현합니다.

• React에서는 컴포넌트가 업데이트될 때마다 해당 컴포넌트가 재랜더링(re-rendering) 되어, 가상 DOM을 이용해 렌더링 작업이 수행됩니다. 이 때 불필요한 렌더링 작업이 수행되는 경우가 있는데, 그 중에서도 부모 컴포넌트가 업데이트되어 자식 컴포넌트들도 재랜더링이 필요할 때, 자식 컴포넌트의 prop이나 state가 변경되지 않았는데도 불필요한 재랜더링이 발생하는 경우가 있습니다.

이때 useCallback을 사용하면, 함수를 재사용할 수 있습니다. 예를 들어, 자식 컴포넌트에서 함수를 props로 받아 사용하는 경우가 많은데, useCallback을 사용하면 해당 함수가 처음 렌더링될 때 캐싱하여 저장해둔 다음, props나 state가 변경되지 않는 한 이전에 캐싱한 함수를 그대로 사용합니다. 이렇게 하면 자식 컴포넌트에서 불필요한 재랜더링이 발생하지 않아 성능 향상을 기대할 수 있습니다.

하지만 useCallback을 사용하면서도 지나치게 남용하게 되면, 오히려 성능이 저하될 수도 있습니다. 이는 useCallback으로 캐싱된 함수가 변경될 때마다 캐싱을 다시 수행해야 하기 때문입니다. 따라서 useCallback을 사용할 때는 적절한 타이밍과 함께 사용해야 성능 향상을 기대할 수 있습니다.

렌더링

Rendering은 컴퓨터 그래픽스에서 화면에 그림을 그리는 것을 말합니다. 웹 개발에서는 HTML, CSS, JavaScript 등의 코드를 브라우저가 받아서 렌더링 엔진이 이를 해석하여 화면에 표시하는 것을 말합니다.

웹 페이지를 로드하면, 브라우저는 HTML 문서를 파싱하여 DOM 트리를 만들고, CSS를 파싱하여 CSSOM 트리를 만듭니다. 이후 두 트리를 조합하여 렌더 트리를 만들고, 렌더 트리를 기반으로 레이아웃과 페인트 작업을 거쳐 최종적으로 화면에 출력됩니다.

따라서 rendering이란 웹 페이지의 내용이 변경되거나 스타일이 변경될 때, 브라우저가 DOM과 CSSOM을 조합하여 새로운 렌더 트리를 만들고, 이를 기반으로 레이아웃과 페인트 작업을 수행하여 화면에 새로운 내용을 출력하는 과정을 말합니다. 이러한 과정은 사용자가 웹 페이지를 이용할 때 계속해서 반복되며, 새로운 내용이나 스타일이 변경될 때마다 rendering이 다시 발생합니다.