삐돌이컴

import React, { useRef, useReducer, useMemo, useCallback } from 'react';import UserList from './userlist';import CreateUser from './CreateUser'; function countActiveUsers(users) {  console.log('활성 사용자 수를 세는중...');  return users.filter(user => user.active).length;} const initialState = {  inputs: {    username: '',    email: ''  },  users: [    {      id: 1,      username: '김사과',      email: 'apple@apple.com',      active: true    },    {      id: 2,      username: '오렌지',      email: 'orange@orange.com',      active: false    },    {      id: 3,      username: '반하나',      email: 'banana@banana.com',      active: false    },    {      id: 4,      username: '이메론',      email: 'melon@melon.com',      active: false    },    {      id: 5,      username: '배애리',      email: 'berry@berry.com',      active: false    }  ]}; function reducer(state, action) {  switch (action.type) {    case 'CHANGE_INPUT':      return {        ...state,        inputs: {          ...state.inputs,          [action.name]: action.value        }      };    case 'CREATE_USER':      return {        inputs: initialState.inputs,        users: state.users.concat(action.user)      };    case 'TOGGLE_USER':      return {        ...state,        users: state.users.map(user =>          user.id === action.id ? { ...user, active: !user.active } : user        )      };    case 'REMOVE_USER':      return {        ...state,        users: state.users.filter(user => user.id !== action.id)      };    default:      return state;  }} function App() {  const [state, dispatch] = useReducer(reducer, initialState);  const nextId = useRef(4);   const { users } = state;  const { username, email } = state.inputs;   const xxxxonChange = useCallback(e => {    const { name, value } = e.target;    dispatch({      type: 'CHANGE_INPUT',      name,      value    });  }, []);   const onCreate = useCallback(() => {    dispatch({      type: 'CREATE_USER',      user: {        id: nextId.current,        username,        email      }    });    nextId.current += 1;  }, [username, email]);   const onToggle = useCallback(id => {    dispatch({      type: 'TOGGLE_USER',      id    });  }, []);   const onRemove = useCallback(id => {    dispatch({      type: 'REMOVE_USER',      id    });  }, []);   const count = useMemo(() => countActiveUsers(users), [users]);  return (    <>      <CreateUser        username={username}        email={email}        xxxxonChange={xxxxonChange}        onCreate={onCreate}      />      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />      <div>활성사용자 수 : {count}</div>    </>  );} export default App;