[React.js] hook(2)-useMemo

1. useMemo를 쓰는 이유?

함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

2. useMemo 사용법

• app.js

import Nameing from './nameing'

function App() {
  const [nickname, setNickName] = useState('');
  const [title, setTitle] = useState('');


  const handleNameChange = (e) => {
    e.preventDefault();
    console.log(e.target.value);
    setName(e.target.value);
  }

  const handleNicknameChange = (e) => {
    e.preventDefault();
    setNickName(e.target.value);
  }
  return (
    <div className="App">
      <input type = "text" name="name" onChange = {handleNameChange}/>
      <input type = "text" name ="nickname" 
        onChange = {handleNicknameChange}/>
      <Nameing name = {name} nickname = {nickname}></Nameing>
    </div>
  );
}

export default App;

input태그로 사용자에게 name, nickname을 입력받고 그것을 state에 저장하며, Naming 컴포넌트에 props로 전달한다.

• Nameing (no useMemo)

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


const Nameing = ({ name, nickname}) => {

    console.log('nameing is rendering');

    const nameFunction = (name) => {
        let newName = null;
        console.log("namefunction 작동중...");
        if(name!=="") newName = 'Name : '+ name;

        return newName;
    }

    const nicknameFunction = (nickname) => {
        let newNickname = null;
        console.log("nicknamefunction 작동중...");
        if(nickname!=="")newNickname = "nickname : " + nickname;

        return newNickname;
    }

    return(
        <div>
            이름은 {nameFunction(name)} 이구요
            별명은 {nicknameFunction(nickname)} 입니다.
        </div>
    )
}

export default Nameing;

props로 받아온 name의 앞에 'Name : '을 붙여주는 nameFunction과 nickname의 앞에 'nickname : '을 붙여주는 nicknameFunction이 있다. 매우 간단한 코드이다. 이 함수이 return하는 것을 컴포넌트에 렌더링하여 나타낸다. 이 코드를 실행하면 app.js에서 name을 입력받는 input태그의 내용을 수정하면 nicknameFunction도 작동하는 것을 알 수 있다. 반대로 nickname input태그를 수정해도 nameFunction이 작동한다.

지금은 간단한 코드이므로 애플리케이션의 성능에 큰 영향을 끼치지 않지만 애플리케이션의 규모가 커지고, 만약 nameFunction, nicknameFunction이 두 개의 함수가 복잡해지고, 엄청난 연산이 필요한 함수였다면 불필요한 함수의 실행으로 성능이 많이 저하될 수 있다.✔
그럼 이제 useMemo를 사용하여 이것을 해결해보자.

• Nameing (useMemo)

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


const Nameing = ({ name, nickname}) => {

    console.log('nameing is rendering');

    const nameFunction = (name) => {
        let newName = null;
        console.log("namefunction 작동중...");
        if(name!=="") newName = 'Name : '+ name;

        return newName;
    }

    const nicknameFunction = (nickname) => {
        let newNickname = null;
        console.log("nicknamefunction 작동중...");
        if(nickname!=="") newNickname = "nickname : " + nickname;

        return newNickname;
    }
    const user_name = useMemo(()=>nameFunction(name), [name]);
    const user_nickname=
          useMemo(()=>nicknameFunction(nickname),[nickname]);

    return(
        <div>
            이름은 {user_name} 이구요
            별명은 {user_nickname} 입니다.
        </div>
    )
}

export default Nameing;

위와 같이 useMemo를 이용하면 name이 바뀔 때는 nicknameFunction이 작동하지 않고 nickname이 바뀔 때는 nameFunction이 실행되지 않는다. 따라서 최적화가 이루어졌다.

const user_name = useMemo(()=>nameFunction(name), [name]);
const user_nickname=
      useMemo(()=>nicknameFunction(nickname),[nickname]);

두 번째 파라미터는 배열로 이루어지는데, 특정 값이 바뀔때 어떠한 동작이 실행되길 원할 때, 그 특정 값을 배열 안에 넣어주면 된다.
그리고 컴포넌트 return()에는 이렇게 작성한다.

 return(
        <div>
            이름은 {user_name} 이구요
            별명은 {user_nickname} 입니다.
        </div>
    )