리액트 useReducer 연습

- App.js

import { useReducer, useState } from "react";
import Students from "./Students";

const defaultStudentState = {
  count: 1,
  students: [
    {
      id: Math.floor(Math.random() * 10000),
      name: "건디",
      checked: false,
    },
  ],
};

const studentReducer = (state, action) => {
  if (action.type === "ADD") {
    const newStudent = {
      id: Math.floor(Math.random() * 10000),
      name: action.payload,
      checked: false,
    };

    return {
      count: state.count + 1,
      students: [...state.students, newStudent],
    };
  }
  if (action.type === "REMOVE") {
    return {
      count: state.count - 1,
      students: state.students.filter(
        (student) => student.id !== action.payload
      ),
    };
  }

  if (action.type === "TOGGLE") {
    return {
      count: state.count,
      students: state.students.map((student) => {
        if (student.id === action.payload) {
          // 기존학생의 id와 클릭한 학생의 id가 같다면
          return { ...student, checked: !student.checked }; // 기존 학생에서 checked 속성만 반대로 변경하기
        }
        return student; // 학생들 리턴하기
      }),
    };
  }

  return defaultStudentState;
};

function App() {
  //여기서 studentState는 위에 지정해놓은 defaultStudentState 값임
  //dispatchStudentAction는 밑에 dispatchStudentAddHandler나 dispatchStudentRemoveHandler 와 연결
  const [studentState, dispatchStudentAction] = useReducer(
    studentReducer,
    defaultStudentState
  );

  const [name, setName] = useState("");

  const nameHandler = (e) => {
    setName(e.target.value);
  };

  //학생 추가 핸들러

  const dispatchStudentAddHandler = () => {
    dispatchStudentAction({ type: "ADD", payload: name });
  };

  // 학생 삭제 핸들러 여기서 id 값을 어떻게 받아오는가 ?

  const dispatchStudentRemoveHandler = (id) => {
    dispatchStudentAction({ type: "REMOVE", payload: id });
  };

  // 학생 토글 핸들러

  const dispatchStudentToggleHanlder = (id) => {
    dispatchStudentAction({ type: "TOGGLE", payload: id });
  };

  return (
    <>
      <h1>출석부</h1>
      <p>총 학생 수 : {studentState.count}</p>
      <input
        type={"text"}
        placeholder="이름을 입력하세요"
        value={name}
        onChange={nameHandler}
      ></input>
      <button onClick={dispatchStudentAddHandler}>추가</button>
      {studentState.students.map((student) => {
        return (
          <Students
            dispatchStudentRemoveHandler={
              // 함수만 작성하면 바로 함수가 실행되기 때문에 고차함수로 한번 감싸준다.
              () => dispatchStudentRemoveHandler(student.id)
            }
            id={student.id}
            key={student.id}
            name={student.name}
            checked={student.checked}
            dispatchStudentToggleHanlder={() => {
              // 함수만 작성하면 바로 함수가 실행되기 때문에 고차함수로 한번 감싸준다.
              dispatchStudentToggleHanlder(student.id);
            }}
          />
        );
      })}
    </>
  );
}

export default App;

- Students.js

import React from "react";

function Students(props) {
  return (
    <div>
      <span
        style={{
          textDecoration: props.checked ? "line-through" : "none",
          color: props.checked ? "gray" : "black",
        }}
        onClick={props.dispatchStudentToggleHanlder}
      >
        {props.name}
      </span>
      <button onClick={props.dispatchStudentRemoveHandler}>삭제</button>
    </div>
  );
}

export default Students;