useMemo 활용

useMemo 사용했을 때 감동했기 때문에 여러분에게 공유하고 싶어서 썼습니다!

만드는 앱

근육 트레이닝의 종류와 근육 트레이닝 횟수를 기록하는 응용 프로그램.
UI는 이런 식으로, 왼쪽 상단의 입력 폼에 근육 트레이의 종류(팔굽혀 펴기, 스쿼트 등)를 입력해 송신하면, 컴퍼넌트가 추가되어 가게 되어 있습니다.


미실장입니다만, 그 컴퍼넌트중의 폼으로 일자와 횟수를 입력해 송신하면, 그 아래에 기록이 모여 가는 이미지입니다. (UI는 이것이 최선인지 아닌지 제쳐두고 ...)

입력 태그의 초기 값을 오늘 날짜로 만들고 싶지만 재계산이 많아집니다 ...

근육 트레이닝 기록 앱 작성 중 날짜와 근육 트레이닝 횟수를 입력하는 양식을 작성했습니다. 입력하는 타이밍으로서 당일중(근육 트레이닝 직후)에 횟수를 기록하는 것이 많다고 생각되기 때문에, 일자의 입력 폼의 초기치를 당일의 일자로 하고 싶었습니다만, 보통으로 쓰면 재계산 많아지고 낭비가 발생했습니다 ...

useMemo 없음

useMemo가 없으면 근육 트레이닝 유형을 추가 할 때마다 다른 디렉토리에 작성한 today.ts의 calculateToday 함수가 추가로 실행됩니다.


●코드

import React , { FC , useState,useMemo} from 'react';
import Training from '../organisms/training';
import { useForm } from 'react-hook-form';
import { calculateToday } from '../today/today';
import './trainingList.scss';

type training = {
    trainingName: string,
}

const TrainingList: FC = () => {
    const { register , handleSubmit , reset} = useForm<training>();   
    const [ trainingList, setList ] = useState<training[]>([]);
    // const today = useMemo(()=> calculateToday(),[])
    const today = calculateToday()

    const onSubmit = (data: training) => {
        const {trainingName} = data;
        if (!trainingName) {
            alert('トレーニング名を入力してください。') 
            return
        } else if (trainingList.some((name) => name.trainingName === trainingName )) { 
            alert("そのトレーニングは既に登録されています。") 
            reset()
            return
        }

        setList([
            ...trainingList,
            {trainingName:trainingName}   
        ]);

        reset();
    }

    return (
        <div className='container'>
                <form className='input-form' onSubmit={handleSubmit(onSubmit)}>
                    <input name='trainingName' ref={register} placeholder='training name'/>
                    <input type='submit'/>
                </form>

            <div className='main'>
                {
                    trainingList.map((list) => {
                        return(
                                <Training
                                    trainingName={list.trainingName}
                                    key={list.trainingName}
                                    today={today}
                                />
                        )
                    })
                }            

            </div>

        </div>
    )
}

export default TrainingList;

useMemo 있음

useMemo를 사용하면, calculateToday 함수의 실행을 1회만으로 할 수 있어, 아래의 검증 툴을 보시면 알 수 있듯이, 불필요한 재계산을 없앨 수가 있었습니다.


코드는 위 코드의 TrainingList 컴퍼넌트의 위로부터 4행의 코드 대신에, 3행의 코멘트 아웃하고 있는 부분을 부활시키는 것 뿐입니다.

    const today = useMemo(()=> calculateToday(),[])
    // const today = calculateToday()

마지막으로

여기까지 위대하게 써 왔습니다만, 업무 미경험 때문에, 원래 보다 좋은 실장 방법, UI가 있을지도 모릅니다만, useMemo의 활용예의 1례로서 여러분에게 공유할 수 있으면 좋겠습니다! 지적 등 엄격한 의견을 기다리고 있습니다!