📑 React Life Cycle

들어가며, 리액트의 생명 주기에 대해 아주 간단히 알아보도록 하자 !

• Mount: 컴포넌트가 최초 실행될 때
• Render
  • 컴포넌트 내의 엘리먼트 요소들(HTML, React 사용자 정의 태그 등)을 화면 상에 그리는 동작
  • 컴포넌트가 마운트된 후, 컴포넌트가 호출될 때
• re-Render: 렌더링 동작을 다시 수행하는것
• UnMount: 컴포넌트가 사라질 때

즉, 컴포넌트가 처음 나타날 때를 마운트, 그 이후 값이 변경되어 컴포넌트가 변경된 상태에서 호출될 때를 렌더링 이라고 부른다.

🔰 Class Component 생명주기

👀 Mount (마운트)

: 컴포넌트가 생성 시, 발생하는 생명주기

✔︎ constructor

• 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메소드

✔︎ getDerivedStateFromProps

• props로부터 파생된 state를 가져오는 메소드

✔︎ render

• 컴포넌트를 렌더링하는 메소드

✔︎ componentDidMount

• 컴포넌트가 마운트되면 호출되는 메소드

👀 Updating (업데이트)

: 컴포넌트 업데이트 시점에 호출되는 메소드

✔︎ getDerivedStateFromProps

• 컴포넌트의 props나 state 변경 시 호출되는 메소드

✔︎ shouldComponentUpdate

• 컴포넌트의 리렌더링 여부를 결정하는 메소드
  • React.memo와 유사
  • boolean 반환

✔︎ componentDidUpdate

• 컴포넌트 업데이트 후 발생하는 메소드
  • 의존성 배열이 변할 때만 useEffect가 실행되는 것과 같은 맥락 !

👀 UnMount (언마운트)

: 컴포넌트가 화면에서 사라지는 것과 관련된 메소드

✔︎ componentWillUnmount

• 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메소드

---

📑 useEffect()

• 컴포넌트가 렌더링될 때 특정 작업(side effect)을 실행할 수 있도록 하는 Hook
  • side effect: 컴포넌트가 렌더링 된 이후, 비동기로 처리되어야 하는 부수적인 효과
    • ex. 함수 내부에서 함수 외부의 변수를 변하게 하는 액션
• componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 !

🔰 useEffect, 언제 작업을 처리하는가!

1. component가 mount 됐을 때
2. component가 unmount 됐을 때
3. component가 update 됐을 때

⇒ 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드(componentDidMount, componentDidUpdate, componentWillUnmount)를 함수형 컴포넌트에서도 사용 가능해짐!

🔰 useEffect 구조

useEffect (function, deps)

• function: 수행하고자 하는 작업

  • 리액트는 이 함수를 기억했다가, DOM 업데이트 이후 불러냄
  • function이 함수(a)를 return할 경우, 컴포넌트 unmount 시 함수(a) 다시 실행

• deps : 의존성, 이 값에 의존하여 function 실행

  • 배열 형태/ 검사하고자하는 특정 값이나 빈 배열이 들어감.
  • 특정 값이 들어가는 경우: 컴포넌트가 mount될 때, 지정한 값이 업데이트될 때 useEffect 실행
  • 빈 배열이 들어가는 경우: 따로 의존성을 갖지 않게 되어, 컴포넌트 mount 시 한 번만 실행됨.

🔰 cleanup 함수

👀 기본 형태

useEffect(() => {
	... // 실행할 내용

	return () => {
		... // clenup
	}
}

• cleanup 함수: 컴포넌트 unmount 시, 실행되는 함수
  • 컴포넌트가 사라질 때 호출되는 함수
  • 메모리 누수를 방지하여 메모리를 관리하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용
  • 단, react 18 버전부터는 메모리 누수에 대한 경고가 사라짐

👀 예제

useEffect(() => {
	// 실행 함수
  const timer = setTimeout(() => {
  }, 3000);

	// clean-up 함수
  return () => { lock = true };

}, []);

• 리렌더링 시, useEffect의 return 함수 실행
• 실행된 함수가 useEffect의 내부 기능의 작동을 막음
• setState나 setTimeout, API 요청과 같은 비동기 함수가 작동할 때 조건문을 걸어 unmount되지 않았을때만 실행할 수 있도록 함

🔰 effect 타이밍

• useEffect로 전달된 함수는 컴포넌트 렌더링 - 화면 업데이트 - useEffect 실행 순서로 실행됨.
  • 즉, useEffect 실행은 최초 렌더링 이후에 일어남!!
• 만약 화면을 다 그리기 전에 동기화를 시키고 싶은 경우?
  • useLayoutEffect()를 활용하자!
  • useLayoutEffect로 전달된 함수는 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트 순서로 실행되기 때문에, 화면 업데이트 전 동기화가 가능해짐.

---

📑 useLayoutEffect()

• 사실상 useEffect()와 거의 동일한 역할을 하는 훅
• 아래에 명시한 useLayoutEffect()의 선언/ 정의 방식 역시, useEffect()와 거의 동일한 모습을 확인할 수 있다.

🔰 useLayoutEffect 구조

useLayoutEffect (function, deps)

useLayoutEffect(() => {
	... // 실행할 내용

	return () => {
		... // clean-up
	}
}

• 수행하고자 하는 작업인 function과 함수 실행 시점에 영향을 미치는 의존성 배열인 deps 를 매개 변수로 가짐.
• clean-up 함수 활용 가능.

🔰 useLayoutEffect() vs useEffect()

👀 이벤트 호출 시기

🐝 useEffect: 컴포넌트 마운트 실행 → 브라우저가 화면에 DOM 그리기(화면 업데이트) → effect 함수가 실행됨

🐿️ useLayoutEffect: 컴포넌트 마운트실행 → effect 함수 실행 → 브라우저 화면에 DOM 그리기(화면 업데이트)

👀 화면 깜빡임

🐝 useEffect: 컴포넌트들이 render, paint된 후 실행되기 때문에, 비동기적으로 실행이 이루어짐

• 함수 내부 DOM에 영향을 주는 코드가 있을 경우, 화면 깜빡임 발생 ⭕️ !
  • paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

🐿️ useLayoutEffect: 컴포넌트들이 render된 후 실행되고, 후에 pain가 되기 때문에 동기적으로 실행이 이루어짐

• 함수 내부 DOM을 조작하는 코드가 존재하더라도, 화면 깜빡임 발생 ❌ !

👀 결론

• useLayoutEffect()는 동기적으로 실행되며, 내부 코드가 모두 실행된 후 painting 작업을 거치기 때문에 로직이 복잡할 경우 사용자가 레이아웃을 보기까지 오랜 시간이 걸린다.
• data fetch, event handler, state reset 등 **기본적인 작업 시에는 useEffect()를 사용**하는 것이 좋다.
• 단, DOM을 조작하거나 state들이 조건에 따라 첫 painting 시 다르게 렌더링되어야 하는 경우에는 useLayoutEffect()를 사용하는 것이 좋다.
  • useEffect 사용 시, re-rendering으로 인해 화면 깜빡임 발생

---

📑 useMemo()

• 리액트에서 컴포넌트 성능을 최적화하는데 사용되는 훅
  • 부모 컴포넌트의 값이 변했을 때, 자식 컴포넌트에 발생할 불필요한 리렌더링을 방지
• useMemo에서 ‘memo’는 memoization을 의미
  • ‘메모리에 넣는다’는 의미
  • 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면, 처음 값을 계산할 때 해당 값을 메모리에 저장하여 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 사용

🔰 useMemo 구조

useMemo(calculateValue, dependencies)

• calculateValue: 캐시하려는 값을 계산하는 함수
  • 인수를 취하지 않는 순수 함수여야 함!
• dependencies: 의존성 배열
  • 특정 값이 들어가는 경우: 콜백 함수 재 호출 → memoization된 값 업데이트 → 다시 memoization 실행
  • 빈 배열이 들어가는 경우: 따로 의존성을 갖지 않게 되어, 컴포넌트 mount 시 한 번만 값 계산 → 이후 항상 memoization된 값 꺼내와서 사용

🔰 useMemo 주의사항

• useMemo()를 활용하여 값을 캐싱하려면 구성 요소의 최상위 레벨에서 호출해야 함!
• restrict mode에서는 계산 함수를 2번 호출 함
  • 이는 개발 전용 동작이며, 프로덕션에는 영향을 주지 않음!
  • 계산 함수가 순수함수로 잘 구현되어 있다면, 프로덕션에 영향을 주지 않고 호출 중 하나의 결과는 무시됨.
• 값을 재활용하기 위해 메모리를 써서 값을 저장하는 훅이기 때문에, 불필요하게 모든 값을 memoization 해버리면 성능 저하가 발생하게 됨
• 따라서, 꼭 필요한 경우에만 사용할 것을 권장한다 !

🚨 useMemo vs React.memo

🎃 React.memo

const MyComponent = React.memo((props) => {
	return (/*컴포넌트 렌더링 코드*/)}
);

• Higher-Order Components(HOC)
  • 컴포넌트를 인자로 받아 새로운 컴포넌트를 다시 return 해주는 함수.
  • 인자로 받은 컴포넌트로 새로운 별도의 컴포넌트를 만듦.
• 불필요한 컴포넌트 렌더링 방지.
  • 컴포넌트가 같은 props를 받고 같은 결과를 렌더링하는 경우, React.memo를 활용하여 불필요한 컴포넌트 렌더링 방지.
• 오직 props 변경 여부만을 체크.
  • 함수 내부에서 useState와 같은 훅을 사용하고있다면, state가 변경될 때마다 렌더링 발생.
  • props로 들어온 값 비교. (num, str → 실제 값이 동일한지 비교, object → 참조 reference 여부 비교)
• 메모이제이션을 하고자 하는 컴포넌트 자체를 React.memo로 감싸줌.
• 상위 컴포넌트가 리렌더링되더라도 React.memo로 감싸준 컴포넌트는 리렌더링되지 않음.

🎃 useMemo

• 복잡한 결과 값을 memoization 해서 최척화하기 위한 Hook.
• Hook이기 때문에 함수형 컴포넌트 내에서만 사용 가능.
• 값을 계산하는 과정을 최적화 → 값 반환.

🎃 결론

공통점

• props가 변하지 않으면(이전 props와 동일하면) 인자로 넘긴 함수는 재실행되지 않고, 이전 memoized된 결과를 반환함.

차이점

• React.memo는 HOC, useMemo는 hook.
• React.memo: 함수이기 때문에 클래스형 컴포넌트와 함수형 컴포넌트 모두 사용 가능.
• useMemo: hook이기 때문에 오직 함수형 컴포넌트 내에서만 사용 가능.