[React] useMemo

2024. 8. 6. 21:11· FrontEnd/React
목차
  1. 1.useMemo 
  2. 2.예시
728x90

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/


1.useMemo 

리액트의 훅 중 하나로, 성능 최적화를 위해 메모이제이션을 수행합니다.
메모이제이션은 계산된 값을 기억해두어, 같은 입력 값에 대해 같은 결과를 반복적으로 계산하지 않도록 합니다.
이 훅은 주로 렌더링 성능을 최적화할 때 사용됩니다.

 

 

 

 

 

2.예시

useMemo의 두 번째 인자로 의존성 배열 을 포함시켜 배열에 포함된 값이 변경될 때만 메모이제이션된 값을 다시 계산합니다. 배열이 빈 경우, 메모이제이션된 값은 컴포넌트가 마운트될 때 한 번만 계산됩니다.

아래 코드의 경우 number 값이 변할때만 메모이제이션된 값을 다시 계산합니다.

여기에서 setOtherState(!otherState)}을 통해 App 컴포넌트가 다시 렌더링되게 하는 경우에도  number 상태는 변경되지 않았기 때문에 복잡한 계산은 안해도 된다.
import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ number }) {
  // 복잡한 계산을 수행하는 함수
  const computeExpensiveValue = (num) => {
    console.log('복잡한 계산 중...');
    // 계산에 시간이 걸리는 작업
    return num * 2;
  };

  // useMemo를 사용하여 계산된 값을 메모이제이션합니다.
  const expensiveValue = useMemo(() => computeExpensiveValue(number), [number]);

  return <div>계산된 값: {expensiveValue}</div>;
}

function App() {
  const [number, setNumber] = useState(1);
  const [otherState, setOtherState] = useState(false); // 다른 상태

  return (
    <div>
      <button onClick={() => setNumber(number + 1)}>숫자 증가</button>
      <button onClick={() => setOtherState(!otherState)}>다른 상태 변경</button>
      <ExpensiveComponent number={number} />
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

만약 useMemo를 사용하지않으면 위에서 setOtherState(!otherState)}를 할때마다 복잡한 계산을 하여 성능의 저하로 이어질것이다.
// useMemo를 사용하지 않음
const expensiveValue = computeExpensiveValue(number);

 

 

728x90

'FrontEnd > React' 카테고리의 다른 글

[React] useCallback  (0) 2024.08.06
[React] useEffect  (0) 2024.08.06
[React] 가상 DOM (Virtual DOM)  (0) 2024.08.06
  1. 1.useMemo 
  2. 2.예시
'FrontEnd/React' 카테고리의 다른 글
  • [React] React.memo
  • [React] useCallback
  • [React] useEffect
  • [React] 가상 DOM (Virtual DOM)
아사_
아사_
프로그래밍 공부한거 정리해두는 메모장 블로그
아사_
개발공부 블로그
아사_
전체
오늘
어제
  • 분류 전체보기
    • FrontEnd
      • html
      • css
      • JavaScript
      • Node.js
      • React
      • React Native
    • BackEnd
      • SpringBoot
      • FastAPI
      • PHP
      • Flask
      • supabase
    • Language
      • Python
      • JAVA
      • Kotlin
      • C++
    • Development Tools
      • AWS
      • GIT,GITHUB
      • Docker
      • 메시지 브로커
      • 기타 도구,플랫폼
    • Computer Science
      • 개발지식
      • Server&Network
      • Algorithm&DataStructure
      • Security
      • DataBase
      • OS
    • AI
    • 기타
      • 잡다
      • Android
      • 도서
    • 클론코딩
      • 생활코딩 Express.js
      • 점프 투 장고
      • 생활코딩 Node.js
    • 프로젝트
      • DevQuest

인기 글

최근 글

250x250
hELLO · Designed By 정상우.v4.2.2
아사_
[React] useMemo
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.