오늘은 useReducer를 공부하고, 사용해본 활용기를 작성해보고자 한다!
useState도 아직 잘 모르겠는데,, useReducer라니,, 그게 뭘까 싶을 것이다
(나는 그랬다..)
🤔 useReducer, 뭘까..?
useReducer는 useState와 동일하게 컴포넌트 내부에 새로운 State를 생성하는 React Hook이다.
useReducer만의 차이점은, useState와 다르게 상태 관리 코드를 컴포넌트 외부로 분리 할 수 있다.
react 컴포넌트의 주된 역할은 UI를 렌더링 하는 것이다.
하지만, 상태 관리 코드가 너무 길어지게 되면 컴포넌트의 본질도 잃고 코드를 확인하기만 더 복잡한 구조가 되는 것이라 볼 수 있다🤯
그래서, 이를 컴포넌트 외부로 분리해주기 위해서
외부로 뺄 수 없는useState대신 useReducer를 사용하는 것이다.
📌 어떻게 사용하는걸까?
const [state, dispatch] = useReducer();useReducer 훅은 위와 같은 형태로 호출한다.
useState와 형태가 굉장히 비슷하다.
- 첫 번째 요소에는 새로운 state를 생성해주고,
- 두 번째 요소에는 상태 변화를 요청하는 함수인 dispatch를 넣어준다.
우리가 위와 같이 훅을 호출하면 내부 동작은 아래와 같이 이루어진다.
- 컴포넌트 내부에서 dispatch 함수가 호출되면서 상태 변화가 요청된다.
- 그럼 useReducer가 상태 변화를 실제로 처리할 함수를 또 호출한다.
- 그럼 그 함수(직접 만들어야함)가 동작하게 되면서 상태 변화가 일어난다
상태 변화를 일으킬 함수는 컴포넌트 외부에서 생성한다.
그 함수의 이름을 reducer라고 한다면
const [state, dispatch] = useReducer(reducer);이렇게 인수로 넣어주면 된다.
이름이 꼭 reducer일 필요는 없지만,
useReducer의 첫 번째 인수로는 상태를 실제로 변화시키는 함수의 이름을 작성해주면 된다!
두 번째 인수도 추가가 가능한데,
두 번째 인수에는 state의 초기값을 설정할 수 있다.
const [state, dispatch] = useReducer(reducer, 0);이렇게 되면 state의 초기값이 0이라는 것이다.
사용자의 어떤 액션이 생기면 상태값이 보통 변하는데,
함수를 컴포넌트 내부에서 생성해서 해당 함수를 이벤트 핸들러로 설정해주고,
이벤트 핸들러 함수 안에서 dispatch를 호출 해주면 된다.
이때, dispatch의 인수로는 상태가 어떻게 변화되길 원하는지를 전단해야한다.
그래서 보통 dispatch는 객체 형태로 전달이 되는데,
dispatch({
type: "",
data:
})형태가 위와 같이 생기게 된다.
- type에는 타입 명을 작성해주면 된다.
- (ex: "INCREASE", "DELETE", ...)- data에는 변화될 데이터의 양(?) 을 명시해준다.
- (ex: data가 1이라면 1씩 증가될수도, 1씩 감소되게 할 수도 있다)
dipatch가 인수로 가지고 있는 이 요청들이 담긴 객체를 보통 action 객체 라고 부른다.
dispatch 안에서 액션 객체까지 잘 작성이 되었다면 useReducer가 실제 상태를 변경시키기 위해서 작성했던 함수를 호출해주는 것이다.
이 함수를 위해서 정한 것처럼 reducer라고 한다면
이 함수의 매개변수로 첫 번째 값에는 현재 state값을 제공해주고,
두 번째 값으로는 action객체를 제공해주면 된다.
상태 변화 함수가 없어도 reducer 함수 안에서 새로운 state를 반환해주면 state의 값을 변경시킬 수 있다.
예를 들어 type을 "plus" 라고 지정을 했다면,
function reducer(state, action) {
if(action.type === "plus"){
return state+action.data
}
}기존 state에 action객체의 data만큼 증가된 새로운 state값이 반환되어
상태가 실제로 변경될 것이다.
😶🌫️마무리하며...
useState도 헷갈리던 내가.. useReducer를 공부해보면서 오히려 useState의 개념도 다시 복습해볼 수 있어서 일석이조의 시간을 가졌던 것 같다.
useReducer의 존재를 알고는 있었지만, 제대로 이해하지 못했어서 이전 프로젝트들에서는 컴포넌트 내부에 상태 변화 코드가 줄줄줄 길어져 코드 관리가 힘들었을 때가 있었다 ㅠ
useReducer를 활용해서 이미 끝난 프로젝트이지만, 혼자서 리팩토링의 시간을 가져보는 것도 좋을 것 같다!
다음에는 context를 공부한 내용을 가지고 돌아오도록 하겠다! 🌠
