🔫 React_07 useCallback

🎮 useCallback

• useMemo : 특정 결과값을 재사용 할 때 사용
• useCallback : 특정 함수를 새로 만들지 않고 재사용할 때 사용

• App.js에서 구현했던 onCreate, onRemove, onToggle 함수 확인
  • 컴포넌트가 리렌더링 될 때마다 함수들이 새로 생성됨
  • 함수를 선언하는 것 자체는 메모리나 CPU의 리소스를 많이 차지하지 않는다
  • 하지만, 한 번 만든 함수를 필요할 때만 새로 만들고 재사용 하는 것은 중요

나중에 컴포넌트에서 props가 바뀌지 않으면 Virtual DOM에서 새로 렌더링 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 할 예정
⇒ 그러므로 최적화 작업을 위해 함수 재사용하는 것이 필수

// App.js
const onCreate = () => {
    const user = {
        id: nextId.current,
        username,
        email,
    };
    setUser(users.concat(user));
    
    setInputs({
        username: '',
        email: '',
    });
    
    nextId.current += 1;
};

const onRemove = (id) => {
    setUser(users.filter(user => user.id !== id));
};

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

useCallback을 사용하여 코드 리팩토링

• 함수 안에서 사용하는 상태나 props가 있다면, deps 배열 안에 넣어야 한다.
  • deps 배열 안에 함수에서 사용하는 값을 넣지 않으면, 함수 내에서 해당 값들을 참조할 때 가장 최신 값을 참조 할 것이고 보장할 수 없다.
  • props로 받아온 함수가 있을 경우에도 deps 배열에 넣어야 한다.

// App.js
const onCreate = useCallback(() => {
    const user = {
        id: nextId.current,
        username,
        email,
    };
    setUser(users.concat(user));
    
    setInputs({
        username: '',
        email: '',
    });
    
    nextId.current += 1;
}, [users, username, email]);

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

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

useCallback은 useMemo를 기반으로 만들어졌다.

• 다만, 함수를 위해 사용하기 편하게 한 것
• 아래와 같이 표현할 수 있다

const onToggle = useMemo(() => () => {
    // ...
}, [users])

⇒ useCallback을 사용하여 바로 이뤄낼 수 있는 눈에 띄는 최적화는 없다.

참고

• 벨로퍼트와 함께하는 모던 리액트 - useCallback 을 사용하여 함수 재사용하기