useReducer란?

state를 생성 및 관리해주는 도구
복잡한 state를 다뤄야할때
ex) 객체 안에 배열안에 객체안에 ...

사전 지식 사항 아래 3가지로 이뤄져있음
1. Reducer
2. Dispatch
3. Action

비유
성구가 만원 출금한다고 할 때 직접하는게 아니라
은행에 요구 --> Dispatch
"만원을 출금해주세요" --> Action
은행이(Reducer) 대신 update해줌
거래내역(state)
성구는 요구라는 dispatch 안에 내용이라는 action을 담아서 은행이라는 Reducer에 보냄으로서 state를 변경

dispatch({type: "deposit", payload: number})
useReducer도 useState랑 똑같이 값이 바뀔때마다 컴포넌트 렌더링해줌

useReducer장점
reducer는 전달 받은 액션데로만 state 업데이트 시켜줌
예상한데로만 state update해줌
실수 줄이는데 용이함

아 벨로그 아래 깃헙까지 첨부해야겠네
useReducer
useRef

useReducer를 통해서 학생정보를 담을 state만들자
reducer 에는 state, action을 인자로 받음

students 배열 안에 있는 새로운 학생들 리스틀 보여주기위한 컴포넌트 만들자

const Student = (name) => {
  return (
    <div>
      <span>{name}</span>
      <button>삭제</button>
    </div>
  );
};

이와 같이 했을때 에러 발생문구

Objects are not valid as a React child (found: object with keys {name})

인자를 객체로 감싸주면 됨

{} 안쓰고 컨솔 찍으면 {name 'James'} <이런 객체형태가 리액트 child로 쓸수 없다는 말
쓰고 컨솔 찍으면 name > James

학생 입력하고 추가할 때마다 학생 리스트에 추가하기
state를 변경하는 거니까 은행인 reducer에서 처리해줘야함

계속 이름이 안뜨길래 보니 onClick에서 payload: name 이러고 있었음 {name}이라 해줘야함

삭제기능

case "delete-student":
  return {
    count: state.count - 1,
    // 삭제 기능
    students: state.students.filter(
      (student) => student.id !== action.payload.id
    ),
  };

https://github.com/seonggookang/useReducer