useMemo를 사용하는 이유

useMemo는 렌더링 리소스를 줄이기 위해 사용한다

리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아 재 렌더링할 시 굳이 다시 정의하지 않아도 되는 변수들이 있을 것이다. 그럴 때  useMemo가 이 값은 다시 정의하지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. 

 

const Component = () =>{
    const object = { key:'value'}  // 렌더링 될 때 마다 이값은 계속 재 정의 된다.  
    const [state, setState] = useState(0)

    return (
        <div>   
            <button onClick={()=>{
                setState((prev)=>prev+1)  // setState 실행 -> 재 렌더링
            }}>state:{state}</button>
        </div>
    )
}

 

 

위 코드에서 setState를 통해 렌더링 될 때 마다 object 가 선언된다. 

 

...
const object = useMemo(()=>{return { key:'value'}},[]) 
...

 

하지만 2번째 줄 코드를 useMemo를 사용하여 위와 같이 바꾼다면 우리는 렌더링 될 object변수를 선언하지 않지 않고 그 이전 값을 그대로 가지게 된다. 그럼 그만큼 렌더링 리소스를 아끼게 되는 샘이다.

 

참조 

https://react.dev/reference/react/useMemo