포스코 X 코딩온 7기 9주차 ch3. React (Hooks - useMemo, useCallback)

- react state와 생명주기 기능을 연동할 수 있게 해주는 함수

(클래스 컴포넌트에서만 가능했던

state(상태관리) 와 lifecycle(라이프사이클)이 가능하도록 돕는 기능)

 

- class 안에서는 동작X

대신, class없이 react를 사용할 수 있게 해주는 것

 

- 하지만, 이미 짜놓은 컴포넌트를 

모조리 재작성하는 것은 권장 X

 

- 최상위 단계에서만 호출 가능

(최상위 컴포넌트 X,

반복문, 조건문, 중첩된 함수 내부에서 호출하면 안되는 것!)

 

- Hook은 오로지 React함수형 컴포넌트 안에서만

호출 가능

 

종류

- useState()

: 함수형 컴포넌트에서 상태관리를 위해 사용

: 동적 상태 관리

: 클래스 형 컴포넌트의 state

 

- useEffect()

: sideEffect를 수행 (mount, unmount, update)

: 클래스형 컴포넌트의 componentDidMount와

componentDidUpdate가 합쳐진 형태

: 컴포넌트가 rendering될 때마다 특정 작업을 수행

: Mount(최초 rendering) 될 때만 실행

 

useEffect(()=>{
    console.log("처음 렌더링 될 때만 실행됨!");
 }, []);

: 빈 배열이 있으면 한번만 실행되고 만다는 뜻!

 

useEffect(()=>{
   console.log(name);
 }, [name]);

: 특정 값이 바뀔 때만 실행한다는 뜻

 

useEffect(()=>{
   console.log("effect");
   console.log(name);
   
   return ()=>{
      console.log("cleanup");
      console.log(name);
      };
 });

: 컴포넌트가 update되기 직전에 작업을 수행

-> cleanup(뒷정리 함수) 이용

 

 

- useRef()

: 함수형 컴포넌트에서 ref를 사용하기 쉽게 만들어주는 Hook

: useRef()는 인자로 받은 값으로 초기화된

변경 가능한 ref객체를 반환한다.

: ref.current 로 현재 가리키는 객체에 접근 가능

 

---

useMemo, callback

useMemo는 컴포넌트의 성능을 최적화시킬 수 있는

대표적인 react hooks 중 하나이다.

 

useMemo에서 memo는 Memoization을 뜻한다.

기존에 수행한 연산의 결과값을 어딘가에 저장해 두고

동일한 입력이 들어오면 재활용하는 프로그래밍 기법

 

함수형 컴포넌트란?

 

함수형 컴포넌트는 그냥 함수임.

 

컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말함

함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등) 도 

매번 다시 선언되어 사용됨

 

컴포넌트는 자신의 state가 변경되거나,

부모에게서 받는 props가 변경되었을 때마다

리렌더링 된다.

심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면

부모에게서 받는 props가 변경되지 않더라도

리렌더링 되는게 기본!

 

여기서 발생하는 문제!

 

예를 들어 state, props가 여러가지라면?

그 여러가지 state, props가 전부 재 랜더링 된다면?

 

굉장히 비 효율적이다!

 

 

useMeomo를 사용하면?

 

처음에 계산된 결과값을 메모리에 저장해서

컴포넌트가 반복적으로 렌더링이 되어도 계속 calculate를 다시 호출하지 않고

이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 

재사용할 수 있게한다.

 

그래서 위에서 언급한, 함수형 컴포넌트를 사용했을 때 생기는 문제점을

해결 할 수 있다!

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

: 공식 홈페이지에 나온 것!

 

 //랜더링 과정에서 list값이 변경될 때만 실행
  const avg = useMemo(() => {
    return avgFunc(list);
  }, [list]);

이런 식으로 사용!

 

 

useCallback 를 사용하면?

 

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

해당 코드는 공식 홈페이지에서 제공해주는

useCallback예시코드!

 

//useCallback()
  //반복해서 생성되는 이벤트 핸들러 함수를 useCallback으로 감싸주면
  //함수를 기억해서 컴포넌트가 다시 랜더링되도 기존의 기억하고 있는
  //기존 함수를 그대로 사용
  const withCallback = useCallback(() => {
    console.log("withCallback", count);
    setCount(count + 1);
  }, [count]);

이런 식으로 사용!

 

 

그렇다면 useCallback과 useMemo의 차이점은??

공통점 : 성능 최적화

차이점 :

useMemo : '값'을 재사용

: 값의 재사용을 위해 전달된 함수를 실행하고 그 결과를 저장

useCallback : '함수'를 재사용

: 함수의 재사용을 위해 전달된 '함수 자체'를 저장