react 기본 - 14.useCallback

useCallback

특정 함수를 새로 만들지 않고 재사용하는 React Hook
함수 안에서 사용하는 상태 혹은 props 가 있다면 deps 배열안에 포함시켜야 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조함

 

App.js

// useCallback Hook 설정
import React, {useRef, useState, useMemo, useCallback} from 'react';
import Inner from "./Inner";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

function countActiveUsers(users) {
    console.log('활성 사용자 수를 세는중')
    return users.filter(user => user.active).length;
}

function App() {
    const [inputs, setInputs] = useState({
       usersname: '',
       email: ''
    });

    const {username, email} = inputs;

    const onChange = useCallback(
        e => {
            const {name,value} = e.target;
            setInputs({
                ...inputs,
                [name]: value
            });
        },
        [inputs]
    )
    const [users, setUsers] = useState ([
        {
            id: 1,
            username: 'a',
            email : 'aaa@gmail.com',
            active: true
        },
        {
            id: 2,
            username: 'b',
            email : 'bbb@gmail.com',
            active: false
        },
        {
            id: 3,
            username: 'c',
            email : 'ccc@gmail.com',
            active: false
        }
    ]);
    const nextId = useRef(4);

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

    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]
    )
    // 첫번째 파라미터로 users 인자로 받는 countActiveUsers 함수 호출
    // 두번째 파라미터로 deps에 users 배열 넣기
    const count = useMemo(() => countActiveUsers(users), [users]);

    return (
        <React.Fragment>
            <Inner>
                <CreateUser
                    username={username}
                    email={email}
                    onChange={onChange}
                    onCreate={onCreate}
                />
                <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
                // 렌더링 할 때 보여줌
                <p>활성사용자 수 : {count}</p>
            </Inner>
        </React.Fragment>
    );
}

export default App;