12.2 useMemo(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

useMemo

• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 데이터 값을 저장할 수 있다.
• 첫 번째 인자로 저장할 데이터, 두 번째는 의존성 배열이다.

아래의 코드는 App.js 코드의 일부분이고 배열을 listItems 상수에 할당하여 props로 보낸다.

// App.js

const listItems = useMemo(() => [5, 3, 1, 10, 9], []);

  return (
    <div className="app">
      <DemoList title={listTitle} items={listItems} />
      <Button onClick={changeTitleHandler}>Change List Title</Button>
    </div>
  );

sortedList는 App에서 받은 배열을 정렬하는 코드인데 useMemo가 사용되지 않는다면, 컴포넌트 함수가 재실행 될 때 마다 정렬을 하기 때문에 좋은 코드가 아니다. 

useMemo를 사용하면, 첫 렌더링에만 정렬하고 그 배열을 리액트 내부에 저장한다. 

그리고 의존성 배열로가진 값이 업데이트가 되면 배열을 다시 정렬해준다.

// DemoList.js

const sortedList = useMemo(() => {
    console.log('Items sorted');
    return items.sort((a, b) => a - b);
  }, [items]);