문제 상황

상태변수 감지로 인해 호출하지 않아도 될 함수까지 호출해버리는 현상

function App() {
  const [list, setList] = useState([1, 2, 3, 4]);
  const [str, setStr] = useState("합계");
  
  const getAddResult=()=>{ 
    let sum = 0;
    list.forEach(i => sum = sum + i);
    console.log("sum", sum);
    console.log("getAddResult 실행됨");
    return sum;
  }
  return <div>
    <button onClick={()=>setStr("안녕")}>문자 변경</button>
    <button onClick={() => { setList([...list,10]); }}>리스트값 추가</button>
    <div>
      {list.map(i => (<h1>{ i}</h1>))}
    </div>
    <div>{ str}:{getAddResult()}</div>
  </div>
}

export default App;

리스트값 추가 버튼 클릭시 UI

getAddResult함수 실행

문자 변경 버튼 클릭시 UI

마찬가지로 getAddResult가 실행된다.

상태변수str이 변경되었기 때문에 UI가 다시 로드되면서 발생한 문제

useMemo 사용

useMemo를 사용해 상태변수가 변경될 때 실행할 함수를 지정해준다.
useMemo에 기억된 함수는 의존성에 지정된 상태변수가 변경될 때만 실행되고, 다른 상태변수가 변경되더라도 실행되지 않는다.

function App() {
  const [list, setList] = useState([1, 2, 3, 4]);
  const [str, setStr] = useState("합계");
  
  
  const getAddResult = () => {
    let sum = 0;
    list.forEach(i => sum = sum + i);
    console.log("sum", sum);
    console.log("getAddResult 실행됨");
    return sum;
  };
  const addResult = useMemo(() => getAddResult(), [list]);
  return <div>
    <button onClick={()=>setStr("안녕")}>문자 변경</button>
    <button onClick={() => { setList([...list,10]) }}>리스트값 추가</button>
    <div>
      {list.map(i => (<h1>{ i}</h1>))}
    </div>
    <div>{ str}:{addResult}</div>
  </div>
}

export default App;

const addResult = useMemo(()⇒getAddResult(),[list]);
- getAddResult는 list가 변경될 때만 실행된다.
리스트값 추가 버튼 클릭시 UI

문자 변경 버튼 클릭시 UIgetAddResult가 실행되지 않는다.

getAddResult가 실행되지 않는다.