React
React - 함수 재사용(useCallback)
Starters
2020. 9. 11. 02:25
현재 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 설치해야함