[React] useEffect, useCallback, useMemo, useRef

useEffect, useCallback, useMemo

React에서 제공하는 훅(Hook)으로, 각각 컴포넌트의 성능 최적화 및 부수 효과 관리를 도와주는 기능을 제공합니다.

---

useEffect

useEffect는 컴포넌트가 렌더링된 후에 사이드 이팩트를 수행할 수 있게 해줍니다. 데이터 fetching, 수동 DOM 조작 등이 포함됩니다.

useEffect(() => {
    // 렌더링 후 실행할 코드 
    
    return () => {
    	 // 정리가 필요한 경우 실행할 코드
    }
}, [dependencies]);

 

두 번째 인자로 의존성 배열을 전달하면, 해당 배열의 값이 변경될 때만 실행됩니다. 빈 배열을 전달하면, 컴포넌트가 처음 마운트될 때만 실행됩니다.

---

useCallback

useCallback은 함수를 메모이제이션하여 불필요한 렌더링을 방지합니다. 이 훅은 특정 조건에서만 함수를 새로 생성하도록 합니다. 

 

메모이제이션(memoization): 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

const memoized = useCallback(() => {
    // 함수 코드
}, [dependencies]);

 

두 번째 인자로 의존성 배열을 전달하면, 배열의 값이 변경될 때만 새로운 함수를 생성합니다. 이렇게 하면 자식 컴포넌트에서 함수의 참조가 변경되지 않도록 할 수 있어 성능을 최적화할 수 있습니다.

---

useMemo

useMemo는 계산된 값을 메모이제이션하여 성능을 최적화합니다. 이 훅은 특정 값의 재계산을 방지하고, 값이 변경되지 않는 한 이전 값을 반환합니다.

const memoizedValue = useMemo(() => {
    // 값 계산 코드
	return calculatedValue;
}, [dependencies]);

 

두 번째 인자로 의존성 배열을 전달하면, 배열의 값이 변경될 때만 새로 값을 계산합니다.

---

useRef

useRef는 DOM 요소에 직접 접근하거나, 컴포넌트의 렌더링 사이에 값을 유지할 수 있도록 해주는 훅입니다. 변경 가능한 객체를 반환하며, 이 객체의 .current 속성을 통해 값을 읽고 쓸 수 있습니다.

const myRef = useRef(initialValue);

useEffect(() => {
	myRef.current.focus(); // ref가 가리키는 input 요소에 포커스
}, []);

myRef.current = newValue; // 렌더링 사이에 값 유지

 

컴포넌트가 렌더링된 후 DOM 요소에 직접 접근하고자 할 때 사용되고, 렌더링 사이에 상태를 유지하고자 할 때 사용됩니다. useRef로 설정한 값은 컴포넌트가 다시 렌더링되더라도 사라지지 않습니다.

---

 

요약

• useEffect: 컴포넌트가 렌더링된 후에 실행.
• useCallback: 함수 메모이제이션. 불필요한 렌더링을 방지하기 위해 함수의 참조를 유지.
• useMemo: 값 메모이제이션. 불필요한 계산을 방지하기 위해 이전 계산된 값을 재사용.
• useRef: DOM 요소에 직접 접근하거나 렌더링 사이에 값을 유지하기 위해 사용.

끝이 없네...x