React_useMemo(고정값)

 

import React from "react"

import { useState, useMemo } from "react"

export default function App(){

  const [count, setCount] = useState(0);

  const increase = () => {

    setCount(count + 1)

  }

  //항상 고정된 값을 리턴하는 함수

  const calculateComplexValue = useMemo(() => {

    console.log("calculateComplexValue")

    return 2 * 2 * 987;

  }, []);

  /*

    useMemo 적용 안 된 예제

    - increase 버튼을 클릭하면 count값이 증가하고 재랜더링됨

    -> complexValue값을 다시 그리기 위해 calculateComplexValue() 함수가 재실행됨

    - calculateComplexValue() 함수 안의 값이 항상 동일한 값임에도 불구하고 count값이 변경될 때마다 매번 호출

    -> 성능이슈 발생

 */  

  return (

    <>

      <button onClick={increase}>+</button>

      count: {count}

      <p>complexValue: {calculateComplexValue}</p>

    </>

  )

}