[React 문법 기초] hooks / useMemo

useMemo

지정한 상태값 변경 시, 지정한 함수가 함께 랜더링 되도록 만들기!

• 함수와 DependencyList를 파라미터로 갖는다.

• List 내에 있는 상태값이 변경될 때마다 지정된 함수를 실행시켜주는 것.

​

useMemo 실행주기

아래와같이,

[리스트 값 추가] 버튼과

[값 추가 종료] 버튼이 있을 때,

​

[값 추가 종료] 를 누르면 getAddResult() 함수는 더이상 실행되지 않도록 만들고 싶다.

​

하지만 아래는 [값 추가 종료] 버튼을 눌러도 getAddResult()가 실행된다.

function App() {

  const [list, setList] = useState([1,2,3]);
  const [str, setStr] = useState("합계");

  const addResult = useMemo();

  const getAddResult = () => {
    let sum = 0;
    list.forEach(i => sum = sum + i);
    console.log(sum);
    return sum;
  }

  return (
    <div>
      <button onClick={() => {
        setList([...list, 10]);
      }}>리스트 값 추가</button>
      <button onClick={() => {
        setStr("최종 합계");
      }}>값 추가 종료</button>
      {list.map(n => <h1>{n}</h1>)}
      <div>{str}: {getAddResult()}</div>
    </div>
    
  );
}

​

이럴 때, useMemo()를 이용하여, [리스트 값 추가] 버튼이 눌릴 때만 getAddResult()함수를 실행시키도록 한다.

function App() {

  const [list, setList] = useState([1,2,3]);
  const [str, setStr] = useState("합계");

  const getAddResult = () => {
    let sum = 0;
    list.forEach(i => sum = sum + i);
    console.log(sum);
    return sum;
  }

  const addResult = useMemo(()=>getAddResult(), [list]);
// useMemo() 사용한 변수 생성

  return (
    <div>
      <button onClick={() => {
        setList([...list, 10]);
      }}>리스트 값 추가</button>
      <button onClick={() => {
        setStr("최종 합계");
      }}>값 추가 종료</button>
      {list.map(n => <h1>{n}</h1>)}
      <div>{str}: {addResult}</div>
//useMemo 사용한 변수를 넣어준다.
    </div>
    
  );
}
```​