react 기본 - 13.useMemo

useMemo
컴포넌트가 업데이트 되고 렌더링 될 때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다.
이를 방지하기 위해 react Hook 중 useMemo를 사용하며, 연산된 값을 렌더링 시 재 사용할 때 쓰인다.

기본형태
useMemo(function, deps)
> function : 어떻게 연산할 지 정의하는 함수
> deps : 검사할 특정 값을 담은 배열
**배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용**

App.js

import React, {useRef, useState, useMemo} 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 = e => {
        const {name,value} = e.target;
        setInputs({
           ...inputs,
           [name]: value
        });
    }
    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 = () => {
        const user = {
            id: nextId.current,
            username,
            email
        }
        setUsers([...users, user]);
        setInputs({
           username: '',
           email: ''
        });
        nextId.current += 1;
    }

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

    const onToggle = id => {
        setUsers(
            users.map(user => user.id === id ? {...user, active: !user.active} : user )
        )
    }
    // 첫번째 파라미터로 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;