useMemo: 불필요한 연산을 최적화하는 React Hook / Todo 상태 기능

 
 
 
 
 

📍 최적화(Optimization)

: 웹 서비스의 성능을 개선하는 모든 행위

• 서버의 응답 속도 개선
• 정적 파일(이미지, 동영상 등) 로딩 개선
• 불필요한 네트워크 요청 줄임
• 불필요한 리렌더링 방지

 
 

최적화 하는 순서

1. 기능 구현 🔜 완성
2. 최적화
3. 기능 추가, 수정이 힘들기 때문에 기능 구현이 완성된 후 마지막에 최적화 진행

 
 

최적화 대상

• 꼭 필요한 부분에만 최적화 적용

 
 
 

---

 
 

📌 useMemo

: 메모이제이션(memoization) 기법을 기반으로 불필요한 연산을 최적화하는 React Hook


 
 

✨ 메모이제이션(memoization)

: 최초의 연산 값을 메모리에 보관, 동일한 연산이 다시 발생하면 다시 계산하지 않고 저장되어 있던 결과값을 반환하는 기술

 
 
 

---

 
 
 

📌useMemo 구조

useMemo( function, [deps] )

• function:  메모이제이션 할 연산
• deps: 의존성 배열 (검사하고자 하는 특정 값 배열)
• 👉 두 번째 인수인 deps의 값이 변경되면, SideEffect가 발생하여 첫 번째 인수로 전달한 콜백 함수를 실행시킨다.

const value = useMemo(() => {
    return calculate();
},[item])

• useMemo는 콜백 함수가 반환하는 값을 그대로 다시 반환해준다.
• useEffect와 구조 비슷

 
 
 
✨ 의존성 배열 (Dependency array, deps)
: useMemo의 두 번째 인자로 오는 배열
 
 
 

---

 
 

📌 Todo 상태 기능 / useMemo 사용하기

 
 

📍useMemo 함수 불러오기

import { useMemo } from "react";

 

 

 
 
 

📍 현재 Todo들의 상태를 분석하는 기능

 

• 1번 인자 function
  : useMemo 콜백 함수의 반환값(return (totalCount, doneCount, notDoneCount))를 const {totalCount, doneCount, notDoneCount}에 할당
• 2번 인자 deps
  : 앞의 콜백 함수 반환값을 deps를 기준으로 메모이제이션 함
  todos의 값이 변경되면 콜백 함수 실행

const {totalCount, doneCount, notDoneCount} = useMemo(()=>{
        // 전체 Todo 개수
        const totalCount = todos.length;
    
        // 완료 Todo 개수
        /* - filter 메서드는 배열 내 전체 요소를 다 순회하기 때문에 데이터가 많을수록 시간이 오래 걸린다. 
        => useMemo 사용 */
        const doneCount = todos.filter((todo) => todo.isDone).length;

        // 미완료 Todo 개수
        const notDoneCount = totalCount - doneCount;

        // 위의 3개 객체로 반환
        return {
            totalCount,
            doneCount,
            notDoneCount
        }
    }, [todos])
  // 1번 인자 function: useMemo 콜백 함수의 반환값(totalCount, doneCount, notDoneCount)이 const {totalCount, doneCount, notDoneCount}로 들어감 
  // 2번 인자 deps: 앞의 콜백 함수 반환값을 deps를 기준으로 메모이제이션 함, todos의 값이 변경되면 콜백 함수 실행

 
 
 

---

 
 

출처

한입 크기로 잘라먹는 리액트