[React] useEffect, useMemo, useCallback의 차이

useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
• componet가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다.

// 기본 형태
useEffect(function, deps)
// function : 수행하고자 하는 작업
// deps : 배열 형태. 배열 안에는 검사하고자 하는 특정 값 또는 빈 배열

1. Component가 mount 됐을 때 (처음 나타났을 때)

useEffect(() => {
	console.log('마운트 될 때만 실행된다.');
}, []);

• 컴포넌트가 화면에 처음 렌더링 될 때, 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.

useEffect(() => {
	console.log('마운트 될 때만 실행된다.');
});

• 만약 배열을 생략한다면 리렌더링 될 때마다 실행된다.

2. Component가 update 될 때 (특정 props, state가 바뀔 때)

useEffect(() => {
	console.log(name);
	console.log('업데이트 될 때만 실행된다.');
}, [name]);

• 특정값이 업데이트 될 때 실행하고 싶을 경우 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.
• 업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.

3. Components가 unmount 될 때 (사라질 때) & update 되기 직전에

useEffect(() => {
	console.log('effect');
	console.log(name);
	return () => {
		console.log('cleanup');
		console.log(name);
	};
}, []);

• cleanup 함수 반환
  • return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.
• 언마운트 될 때만 cleanup 함수를 실행하고 싶을 경우, 두 번째 파라미터로 빈 배열을 넣는다.
• 특정 값이 업데이트되기 직전에 cleanup 함수를 실행하고 싶을 때 deps 배열 안에 검사하고 싶은 값을 넣어준다.

deps에 특정 값 넣기

• deps에 특정 값을 넣게 된다면 컴포넌트가 처음 마운트 될 때, 지정한 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.
• useEffect 안에서 사용하는 상태나 props가 있다면 useEffect의 deps에 넣어주어야 하는 것이 규칙이다.
• 만약 사용하는 값을 넣어주지 않는다면, useEffect 안의 함수가 실행될 때 최신 상태, props를 가리키지 않는다.
  • deps 파라미터를 생략한다면 컴포넌트가 리렌더링 될 때마다 useEffect 함수가 호출된다.

출처

• https://xiubindev.tistory.com/100

---

useMemo

• 렌더링이 될 때마다 memorization 기법을 적용하여 저장 후 값을 그대로 사용한다.
• memoization
  • 기존에 수행한 연산의 결과값을 어딘가 저장해두고 동일한 입력이 들어오면 재활용하는 프로프래밍 기법
  • 적절히 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다.

// 기본 형태
useMemo(function, deps)
// function : 어떻게 연산할지 정의하는 함수
// deps : 검사할 특정 값을 담은 배열
// 배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 
// 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.

• useMemo를 남용하면 컴포넌트의 복잡도가 올라가기 때문에 코드를 읽기도 어려워지고 유지보수성도 떨어진다.
• useMemo가 적용된 레퍼런스는 재활용을 위해 가비지 컬렉션에서 제외되므로 메모리를 더 쓰게 된다.

출처

• https://xiubindev.tistory.com/101?category=826117
• daleseo.com/react-hooks-use-memo/

---

useCallback

• useCallback은 useMemo를 기반으로 만들어졌기 때문에 비슷한 점을 가진 Hooks이다.
• useMemo는 특정 결과값을 재사용할 때 쓰고, useCallback은 특정 함수를 재사용할 때 사용한다.
• useCallback을 사용할 때 함수 안에서 사용하는 state, props가 있다면 반드시 deps 배열 안에 포함시켜야 한다.
• 컴포넌트에서 props로 함수를 받아왔다면 그 함수도 deps에 포함시켜야 한다.
• 함수를 자식 컴포넌트에 props로 넘겨줄 때 항상 useCallback을 사용해야 한다.
  • 그렇지 않으면 자식 컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다.
• useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다.
  • 함수가 새로 만들어지는 것이 성능을 떨어뜨리지는 않지만, 컴포넌트 결과물을 재사용하는 최적화 작업을 할 때 함수를 재사용하는 것이 필요하다.

// 기본 형태
useCallback(function, deps)
// function : 재사용할 함수
// deps : 검사할 특정 값을 담은 배열
// 배열 안의 값이 바뀌면 함수를 호출해서 연산하고,
// 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.
// 함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다.

• useCallback을 사용하면 해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.

출처

• https://www.daleseo.com/react-hooks-use-callback/
• https://xiubindev.tistory.com/102?category=826117

---

정리

• useEffect

  • 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook
  • 두번째 인자인 deps에 어떤 배열이 들어오는가에 따라 실행되는 것이 다르다.
  • useEffect에서 함수를 반환할 수 있는데, 이 함수를 clean-up 함수라 하고 컴포넌트가 사라질 때 clean-up 함수가 호출된다.

• useMemo

  • 렌더링 될 때마다 momorization 기법을 적용하여 저장 후 값을 그대로 사용한다.
  • 두번째 인자인 deps 배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.

• useCallback

  • useMemo를 기반으로 만들어졌기 때문에 비슷한 점을 가졌다.
  • useMemo는 특정 결과값을 재사용할 때 쓰고, useCallback은 특정 함수를 재사용할 때 사용한다.
  • useCallback을 사용하면 해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.