[React-Hooks] - useReducer

참고

React Hooks에 취한다 - useReducer 확실히 정리해드려요 | 리액트 훅스 시리즈

코드보러가기

---

🌞 목차

1. useReducer
2. useReducer 의 구조
3. useReducer 사용하기

---

컴포넌트의 state를 생성하고 관리하기 위해서 useState를 사용해왔다. 하지만 리액트에서 state 관리를 위한 또 다른 훅이 있다. 바로 useReducer 라는 훅이다.

1. useReducer

useReducer는 useState 처럼 state를 생성하고 관리할 수 있도록 도와주는 도구이다. 그렇다면 useReducer는 언제 사용하는 것일까?

{
	teacher: 'James',
    student: ['Kim','Amy','John'],
	count : 3,
    locations: [
      {country: 'Korea', name: 'A'},
      {country: 'Australia', name: 'B'}
    ]
}

위처럼 여러개의 하위 값을 포함하는 복잡한 state를 다뤄야할 때 useState 대신 useReducer를 사용하면 코드를 더 깔끔하게 작성할 수 있다. 물론 유지보수도 한결 편해진다. 이렇게 편리한 훅인 useReducer에 대해 더 알아보자.

2. useReducer 의 구조

useReducer는Reducer , Dispatch 그리고 Action 이렇게 3가지로 구성되어 있다.

만약 철수와 은행 그리고 거래내역이 있다고 가정해보자. 철수의 거래내역은 철수가 직접 수정하는 것이 아니라 은행이 철수의 요구대로 대신 업데이트 해준다.
여기서 이 거래내역을 state 라고 한다면 은행을 Reducer라고 할 수 있다. Reducer 는 state 를 업데이트 해주는 역할을 한다. 컴포넌트의 state를 변경하고 싶다면 꼭 이 Reducer를 통해서 해야되는 것이다. 마치 철수가 거래내역을 업데이트하기 위해선 은행이 대신 해줘야 하는 것처럼 말이다.
철수는 거래내역이라는 state를 변경하기 위해 은행에게 요구라는 것을 한다. 이 요구라는 행위를 Dispatch라고 할 수 있다. 그리고 '만원을 출금해주세요'라는 요구(Dispatch)의 내용을 Action이라고 한다.
철수는 요구라는 Dispatch 안에 내용이라는 Action을 담아서 은행이라는 Reducer에 보냄으로써 state를 변경할 수 있는 것이다.
그러면 Reducer(은행)는 Action(요구사항)의 내용대로 state(거래내역)를 변경해준다.
철수는 은행에게 여러가지 다른 액션들을 보냄으로써 복잡한 일을 할 수 있다. 철수의 액션을 알아서 처리해주는 Reducer는 복잡한 일을 하는데 있어서 아주 최고라고 할 수 있다.

이제 이것을 컴포넌트의 관점에서 보자.

우리의 state를 업데이트 시켜주기 위해서는 Dispatch라는 함수의 인자로 Action을 넣어서 Reducer에게 전달해주면 된다. 그러면 Reducer가 컴포넌트의 state를 우리의 Action안에 들어가있는 내용대로 업데이트 시켜준다.

3. useReducer 사용하기

간단한 예금 출금 예제

useReducer의 reducer는 전달 받은 action 대로만 state를 업데이트 시켜준다는 큰 장점이 있다. 만약에 우리가 알 수 없는 타입의 action을 보낸다면 이 reducer는 아무일도 하지 않기 때문에 어떤 상황에서도 우리가 예상한대로만 state가 업데이트 될 것이다.

출석부 예제

switch 문을 이용해서 케이스별로 다른 역할을 하는 reducer 함수를 만들어 주었다.
학생 추가 기능은 스프레드 연산자를 사용해서 이전의 학생들과 추가한 학생들을 같이 보여주도록 하였다.
삭제 기능을 구현하기 위해서는 학생 각각의 id가 필요해서 Date.now()라는 내장 객체를 사용하였고 filter 메서드를 사용해서 삭제하고 남은 학생들을 보여주도록 하였다.
출석 여부는 isHere 라는 변수를 하나 만들어서 true 나 false의 Boolean 값을 줬다. isHere의 값은 누를때마다 이전 값의 반대가 된다.

여기서 ACTION의 타입(add, delete, mark)들을 한데 모아서 변수로 담아두면 코드 가독성에 좋다.

학생 이름을 추가하는 부분이다.

학생 이름을 지우고 출석체크 하는 부분이다.

전체 코드 보러가기