Frontend 세미나 5주차] React Hooks - 2

컴포넌트 성능 최적화

• useMemo
• useCallback

위 : 컴포넌트 성능 최적화를 위한 hook 2가지

리액트가 리렌더링 하는 조건

• 자신의 state가 변경될 때
• 부모 컴포넌트로부터 전달받은 props가 변경될 때
• 부모 컴포넌트가 리렌더링 될 때

Memoization

해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 개념. 즉 함수를 새로 실행하지 않고 메모리에 있으니까 그 값을 다시 가져오기만 하는 개념.

함수형 컴포넌트의 렌더링 과정

1. 함수 호출

2. 모든 내부 변수 초기화

-> 함수가 복잡할 경우 모든 변수들이 초기화 되고 그 안에 있는 함수들이 또 반복적으로 호출되니까 비효율적이다.

useMemo를 사용한 함수형 컴포넌트의 렌더링 과정

1. 함수 첫 호출

2. Memoization

3. 함수 재 호출

4. Memoization된 값 사용

useMemo의 구조

const value = useMemo(() => {
  return calculate();   // calculate 함수
}, [item])

• 첫번째 인자 : 콜백 함수
  Memoization할 값을 계산해서 return
  콜백 함수가 return하는 값 = useMemo가 return해 변수에 할당되는 값
• 두번째 인자 : 의존성 배열
  배열 안의 요소 값이 update 될 때만 콜백 함수 다시 호출해 Memoization된 값을 update 해 다시 Memoization 한다.

의존성 배열이 빈 배열인 경우 : 컴포넌트가 Mount 되었을 때만 값을 계산, 그 이후에는 항상 Memoization된 값을 사용한다.

- useMemo는 꼭 필요할 때만 사용하자!

=> 값을 재활용하기 위해 따로 메모리를 소비하기 때문에 불필요한 값까지 모두 메모리에 저장하는 경우 오히려 성능은 악화될 수 있다.

- useEffect(() => {},[]); 이렇게 항상 형태를 잡은 후 사용하는 것이 좋다.

 

원시 타입 vs 객체 타입

• 원시 타입 : String, number, Bigint, Boolean, Null, undefined, Symbol //ex) const location = "korea"
• 객체 타입 : Object, Array 등 원시 타입을 제외한 모든 것 //ex) const location = { country: "korea" }
  => 객체의 값을 담은 메모리의 주소값을 가지고 있는 것

useCallback

: 인자로 전달한 함수 자체를 Memoization

- js는 함수도 객체의 일종이라고 생각한다. 
Ex) const calculate =(num) => { return num +1; }   ------> 변수 calculate에 함수 객체( (num) => { return num +1; } )를 할당, 변수에 문자나 정수 등을 할당하는 것처럼

useCallback의 구조

const calculate = useCallback((num)=>{
  return num+1;
}, [item])

• 첫번째 인자 : Memoization할 콜백 함수                      // (num)=>{return num+1;
  함수 객체 생성되며 변수에 할당된다.
• 두번째 인자 : 의존성 배열                                           // [item]
  배열 안의 요소 값이 update될 때만 변수에 새로운 함수 객체 생성되며 초기화된다.
• 변수 : useCallback으로 감싸며 Memoization된 함수 객체             // calculate

- <Box createBoxstyle = {createBoxstyle} />  -->  createBoxstyle이라는 props를 가지는 Box 컴포넌트