useEffect와 useMemo

useEffect 함수

리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 Hook

component가 mount 되었을 때[처음 나타났을 때], component가 unmount되었을 때[사라질 때], component가 update되었을 때[특정 props가 바뀔 때]

기본 형태

useEffect(function, deps)

• function: 수행하고자 하는 작업[함수]
• deps: 배열 형태, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열[의존되는 값들]
  • cleanup 함수: 함수 반환, deps가 비어 있는 경우에 컴포넌트가 사라질 때 호출됨
• 의존되는 값의 배열이 비어 있으면, 컴포넌트가 처음 생성될 때에만 작업이 실행되고, 컴포넌트가 화면에서 사라질 때는 return해서 코드를 작성

useEffect(()=>{
	//mount
    console.log('컴포넌트가 화면에 나타남');
    
    return()=>{
    //unmount
        console.log('컴포넌트가 화면에서 사라짐');
    }
}, [])

---

mount/unmount

mount 시에 하는 작업

• props로 받은 값을 컴포넌트의 로컬 상태로 설정 → 받아온 props를 객체의 state로 설정
• 외부 API 요청(REST API 등)
• 라이브러리 사용(D3, Video.js 등)
• setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약

unmount 시에 하는 작업

• 뒷 정리 함수
• setInterval, setTimeout을 사용하여 등록한 작업들 clear하기(clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

---

deps에 특정 값 넣기

→ 의존성에 값을 추가하면, 그 값의 특정 값이 변경될 때마다 해당 값의 객체 출력

• deps에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때도 호출 됨
• deps안에 특정 값이 있으면 언마운트시에도 호출이 되고, 값이 바뀌기 직전에도 호출이 됨
• useEffect 안에서 사용하는 상태나, props가 있다면, useEffect의 deps에 넣어주어야 함
• 만약, 넣지 않는다면 useEffect에 등록한 함수가 실행 될 때 최신 props 혹은 상태를 가리키지 않음 → 컴포넌트가 리렌더링 될때마다 호출

---

useMemo

리렌더링 시 변경하고자 하는 state에 해당되지 않는 함수들도 같이 실행되므로 비효율적임

→ 성능 최적화(리렌더링 최소화)를 위하여 재사용하는 방법

• Memo는 “memoized”를 의미(이전에 계산한 값을 재사용)

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

기본 구조

import React, { useRef, useState, useMemo } from "react";

function countActiveUsers(users) {
  console.log("활성 사용자 수를 세는 중...");
  return users.filter((user) => user.active).length;
}

const count = useMemo(() => countActiveUsers(users), [users]);

첫 번째 파라미터: 어떻게 연산할지 정의하는 함수

두 번째 파라미터: deps배열 (배열 안에 넣은 내용이 변경되면 등록한 함수 호출하여 값을 연산, 내용이 바뀌지 않으면 이전에 연산한 값 재사용)