useMemo 실습

useMemo를 사용하지 않았을 때

 

 

 

 

 

 

 

 

useMemo를 사용하였을 때

 

 

 

 

 

 

 useMemo에서 Memo는 메모이제이션을 의미한다. 예를 들어 설명하자면, 알고리즘 해결 방법중 동적 계획법과 비슷하다고 생각하면 된다. 렌더링 시에 같은 값을 반복해서 계산해야될 때, 무의미한 연산 수를 줄이기 위한 훅이다. 메모리에 값을 저장해놓았다가 렌더링 시에 저장된 값을 비교하여 변화가 생겼을 때만 함수를 실행시켜주는 훅이다.

 

 

 

 

 

 

// useMemo를 사용하지 않은 코드


import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    const [ text, setText ] = useState('default');

    const handleChange = e => {
        const { value } = e.target;
        setText(value);
    }

    const users = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
    
    // 렌더링 될 때마다 users.reduce가 실행된다.
    // users는 변하지 않기 때문에 무의미한 연산이 낭비된다.
    const count = users.reduce((acc, cur) => {
        console.log('users 수 세는 중...');
        return acc += 1;
    }, 0)

    return (
        <div>
            <div>
                text 입력 : <input type='text' onChange={handleChange}></input>
            </div>
            <div>
                입력된 text : {text}
            </div>
            <div>
                user 수 : {count}
            </div>
        </div>
    )
}


ReactDOM.render(
    <App />,
    document.getElementById('root')
)

 

 

 

 

 

// useMemo를 사용한 코드


import React, { useState, useMemo } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    const [ text, setText ] = useState('default');

    const handleChange = e => {
        const { value } = e.target;
        setText(value);
    }

    const users = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

    const countingUsers = () => {
        return users.reduce((acc, cur) => {
            console.log('users 수 세는 중...');
            return acc += 1;
        }, 0)
    }


    const count = useMemo(countingUsers, users);
    // 두 번째 인자의 값이 변화한다면, 첫 번째 인자인 함수가 실행된다.
    // 그리고 함수의 결과 값이 count에 저장된다.

    return (
        <div>
            <div>
                text 입력 : <input type='text' onChange={handleChange}></input>
            </div>
            <div>
                입력된 text : {text}
            </div>
            <div>
                user 수 : {count}
            </div>
        </div>
    )
}


ReactDOM.render(
    <App />,
    document.getElementById('root')
)

 

 

 

 

 

ko.reactjs.org/docs/hooks-reference.html#usememo

Hooks API Reference – React

 

 

 

 

 

ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98

메모이제이션 - 위키백과, 우리 모두의 백과사전

 

 

 

 

 

react.vlpt.us/basic/17-useMemo.html

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook