The React Hooks - useMemo

1. useMemo Hook

01.The React useMemo는 memorized value를 반환하는 React의 Hook이다.

w3schools 에서는 useMemo를 사용하면 값이 더는 계산될 필요가 없다고 저장하는 것으로 간주한다.라고 정의하고있다.

 

02.useMemo Hook은 이것의 dependencies가 없데이트 될 때, 오직 한번 실행된다.

useMemo(callback function, declare array[]) : useMemo는 인자로 callback function과 의존성 배열을 받는다.

 const calculation = useMemo(() => expensiveCalculation(count), [count]);
 //아래의 함수를 배열에 의존하게 해서 count가 변하지 않는 이상 동작이 안되도록 한다.
 const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

즉 의존성 배열이 업데이트 될 때 콜백 함수를 다시 호출해서 memoization된 값을 업데이트 후 다시 memoization하는 것이다.

만약 빈 배열을 부여한다면 맨 처음 컴포넌트가 mount되었을 때만 값을 계산하고

이후에는 항상 memoization된 값을 꺼내 와서 사용한다.

 

useMemo의 사용법에 대한 이해를 돕는 예제를 아래 첨부하였다.

출처 : https://www.w3schools.com/react/react_usememo.asp 

React useMemo Hook

03.장점

useMemo Hook을 사용하면비싸고 리소스가 집약적인 함수들이 불필요하게 실행되지 않도록 할 수 있다.

즉 같은 함수들이 리렌더링되면서 필요없어도 계속 실행되는 것을 막을 수 있다.

 

**단어 설명

• Memo? = Memo는 Memoization을 뜻한다.
  이는 기존에 수행한 연산의 결과 값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다.
  
  
• Hook? = Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수.
  쉽게 말하자면  hook은 함수형 컴포넌트에서 사용되는 기술을 훅이라 부르며 상태관리와, 컴포넌트 생명주기 기능을 연동할 수 있게 해주는 함수이다.
  
  생명주기? = React의 각 컴포넌트는 3가지 주요 단계를 통해 주기를 관리하고 관찰할 수 있다.
  3가지 주기는 Mounting, Updating, Unmounting이다.
  컴포넌트의 수명 페이지에서 렌더링되기 전 준비과정에서 시작 -> 페이지에서 사라질 때 끝난다.
  
  
• Mounting? = 컴포넌트가 처음 실행 될 때, DOM이 생성되고 웹 브라우저상에 나타나는 것을 뜻한다.
  호출 되는 함수와 순서는 다음과 같다.
  1.constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

• Updating? = 컴포넌트가 업데이트 할 때를 의미한다.
  컴포넌트는 상태나 props가 변경될 때 마다 업데이트 된다.
  1.getDerivedStateFromProps()
  2.shouldComponentUpdate()
  3.render()
  4.getSnapshotBeforeUpdate()
  5.componentDidUpdate()
  
  
• Unmounting = 컴포넌트 제거, DOM에서 제거
  1.componentWillUnmount()