useCallback

// UserList.js

import React, {useEffect} from 'react';

const User = ({user, onRemove, onToggle}) => {
  
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  
  return (
    <div>
      <p onClick={() => onToggle(user.id)}>
    	{user.username}
      </p>
	  &nbsp;
	  <span>
        ({user.email})
      </span>
	  <button onClick={() => onRemove(user.id)}>
        삭제
      </button>
    </div>
  );
};

const UserList = ({users, onRemove, onToggle}) => {
  
  return (
    <div>
    	{users.map(user => (
         	<User
         		user={user}
    			key={user.id}
				onRemove={onRemove}
				onToggle={onToggle}
         	/>
         ))}
    </div>
  );
};


export default UserList;

// CreateUser.js

import React from 'react';

const CreateUsr = ({username, email, onChange, onCreate}) => {
  
  return (
    
    <div>
    	<input
    		name= "username"
    		placeholder= "계정명"
    		onChange={onChange}
			value={username}
    	/>
    	<input
			name= "email"
			placeholder= "이메일"
			onChange={onChange}
			value={email}
		/>
    	<button onClick={onCreate}>등록</button>
    </div>
  );
};

export default CreateUser;

// App.js

import React, { useRef, useState, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

const App = () => {
  
  const [inputs, setInputs] = useState({username:'', email:''});
  const {username, email} = inputs;
  
  const [users, setUsers] = useState([
    {
      id: 0001,
      username: 'amie',
      email: 'aa001@example.com'
    },
    {
      id: 0002,
      username: 'plany',
      email: 'plo100@example.com'
    },
    {
      id: 0003,
      username: 'emilia',
      email: 'e22202@example.com'
    },
  ]);
  
  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);
    setInputs({username: '', email: ''});
    nextId.current += 1;
  };
  
  const onChange = e => {
    const {name, value} = e.target;
    setInputs({...inputs, [name]: value})
  };
  

  
  return (
    <div>
    	<CreateUser
    		username={username}
			email={email}
			onChange={onchange}
			onCreate={onCreate}
    	/>
    	<UserList
			users={users}
		/>
    <div>
  );
};


export defaule App;