배열에서 추가,수정,삭제 기능(useState와 useReducer로 구현)

결과

내용

• useReducer 학습
• name과 email을 추가
• name과 email을 수정
• name과 email을 삭제
• name을 클릭하면 색깔 변경

코드

useState 사용

//app.js
function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: '',
    id: '',
  });

  const { username, email, id } = inputs;

  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'sumin',
      email: 'public.velopert@gmail.com',
      active: false,
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false,
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false,
    },
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };

    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: '',
    });

    nextId.current += 1;
  };

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

  const onToggle = id => {
    //id값을 비교해서 다르다면 그대로 두고, 같다면 active 값을 반전시키기
    //클릭하면 초록과 검정으로 변경됨
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };

  const onModify = users => {
    setInputs({
      username: users.username,
      email: users.email,
      id: users.id,
    });
  };

  const onUpdate = () => {
    //users에 map을 돌려 같은id가 맞으면 변경하고 아니면 그대로 두기
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, username: username, email: email } : user
      )
    );
    setInputs({
      username: '',
      email: '',
      id: '',
    });
  };
  return (
    <div>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
        onUpdate={onUpdate}
      />
      <UserList
        users={users}
        onRemove={onRemove}
        onToggle={onToggle}
        onModify={onModify}
      />
    </div>
  );
}

useReducer 사용

const UserList = ({ users, onRemove, onToggle, onModify }) => {
  return (
    <div>
      {users.map(users => {
        return (
          <div key={users.id}>
            <b
              style={{
                cursor: 'pointer',
                color: users.active ? 'green' : 'black',
              }}
              onClick={() => onToggle(users.id)}
            >
              {users.username}
            </b>
            <span> ({users.email}) </span>
            <button onClick={() => onRemove(users.id)}>delete</button>
            <button
              style={{ backgroundColor: '#C0C0C0' }}
              onClick={() => onModify(users)}
            >
              change
            </button>
          </div>
        );
      })}
    </div>
  );
};

//createUser.js
const CreateUser = ({ username, email, onChange, onCreate, onUpdate }) => {
  return (
    <div>
      <input
        placeholder="name"
        onChange={onChange}
        name="username"
        value={username}
      />
      <input
        placeholder="email"
        onChange={onChange}
        name="email"
        value={email}
      />
      <button onClick={onCreate}>push</button>
      <button style={{ backgroundColor: '#A0A0A0' }} onClick={onUpdate}>
        update
      </button>
    </div>
  );
};

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

//초기화 설정해줄 state
const initialState = {
  inputs: {
    username: '',
    email: '',
    id: '',
  },
  users: [
    {
      id: 1,
      username: 'sumin',
      email: 'public.sumin@gmail.com',
      active: false,
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false,
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false,
    },
  ],
};

//reducer 함수
const 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 {
        //setUsers가 아닌 users: 으로 접근
        ...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),
      };
    case 'MODIFY_USER':
      return {
        ...state,
        inputs: {
          username: action.users.username,
          email: action.users.email,
          id: action.users.id,
        },
      };
    case 'UPDATE_USER':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === state.inputs.id
            ? {
                ...user,
                username: state.inputs.username,
                email: state.inputs.email,
              }
            : user
        ),
        inputs: initialState.inputs,
      };
    default:
      return state;
  }
};

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(4);

  //state 에서 필요한 값들을 비구조화 할당 문법을 사용하여 추출하여 각 컴포넌트에게 전달
  const { users } = state;
  const { username, email, id } = state.inputs;

  const onChange = 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 onModify = useCallback(users => {
    dispatch({
      type: 'MODIFY_USER',
      users,
    });
  }, []);

  const onRemove = useCallback(id => {
    dispatch({
      type: 'REMOVE_USER',
      id,
    });
  }, []);

  const onUpdate = useCallback(() => {
    dispatch({
      type: 'UPDATE_USER',
      username,
      email,
      id,
    });
  }, []);

  const count = useMemo(() => countActive(users), [users]);

  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
        onUpdate={onUpdate}
      />
      <UserList
        users={users}
        onToggle={onToggle}
        onRemove={onRemove}
        onModify={onModify}
      />
      <div>활성사용자 수 : {count}</div>
    </>
  );
}