React - 함수 재사용(useCallback)

현재 App.js 에서 onCreate() 등 함수들은 컴포넌트가 매번 리렌더링 될 때마다 새로운 함수 만들고 있다.

-> 사실상 메모리에 부하에는 큰 영향 주지않음

하지만 함수 재사용할 때, props가 바뀌지 않았다면, virtual DOM 이 하는 리렌더링 작업조차 안하도록 만들 수 있음

 

사용법

- App.js -

1. useCallback 상단에 선언

import React, { useRef, useState, useMemo, useCallback } from 'react';

 

2. onChange() 함수 변경

const onChange = useCallback(e => {
    const {name, value} = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }, [inputs]);

파라미터로 deps 넣어줌 -> 여기서 inputs를 톤해 useState 관리하고 있기 때문에 inputs를 넣어줌

=> inputs가 바뀔 때만 함수가 다시 만들어지게 되고, 그렇지 않으면 기존의 값을 재사용

 

 

3. onCreate() 함수 변경

const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    setUsers(users.concat(user));
    setInputs({
      username: '',
      email: ''
    });

    console.log(nextId.current);

    nextId.current += 1;
  }, [username, email, users]);

username 과 email 도 inputs를 비구조 할당한 것으로 상태를 관리하는 것이기 때문에 모두 deps에 넣어주어야함

(상단에 const {username, email} = inputs; 이 부분)

-> 만약에 deps에 들어갈 값을 빼먹으면, 가장 최신 상태를 참조하는 것이 아니라, 맨 처음 페이지가 렌더링될 때의 상태를 참조하게 된다.

 

 

4. 나머지 함수에도 추가

const onRemove = useCallback(id => {
    setUsers(users.filter(user => user.id !== id))
  }, [users]);

  const onToggle = useCallback(id => {
    setUsers(users.map(
      user => user.id === id
        ? { ...user, active: !user.active }
        : user
    ));
  }, [users]);

 

이렇게 바꿔 주는 것 자체로는 눈에 띄는 최적화는 없음

-> 컴포넌트 리렌더링 성능 최적화를 해주어야 성능이 좋아짐

=> 이 작업 전에 어떤 컴포넌트가 현재 리렌더링 되었는지 알기 위해 react dev tools 설치해야함 

계속 콘솔에 떠 있던 노란 창의 정체