useReducer는 useState와 동일하게 새로운 State를 생성하는 Hook이다. 기본적으로는 useState와 완전히 동일한 기능을 한다.
useState는 컴포넌트 내부에 State 관리 로직을 작성해야 하지만 useReducer는 컴포넌트 외부에 State 관리 로직을 분리할 수 있다.
useReducer에는 인수로 두 가지 값을 전달해야 한다.
첫 번째 인수로는 reducer라는 함수를 전달한다. 그래서 외부에 reducer라는 함수를 만든다. 두 번째 인수는 생성하려는 State의 초기값을 넣어준다.
이런 식으로 useReducer을 호출하면 새로운 State가 자동으로 생성된다. 이때 두 번째 인수로 전달한 0이 count State의 초기 값이 되는 것이다.
useReducer는 useState와 동일하게 두 개의 요소로 이루어진 배열을 반환하는데, 첫 번째 요소(count)는 useState와 동일하게 State값이 저장된다. 두 번째 요소를 dispatch로 저장했는데, dispatch는 상태변화를 발생시키는 역할을 하는 함수이다.
상태변화를 발생시킨다는 것은 dispatch 함수를 호출하면 count State 값이 변경된다는 뜻이다.
dispatch가 일반적인 상태변화함수와 다른 점은 상태변화를 유발하기만 할 뿐, 상태변화를 직접적으로 처리하지 않는다는 점이다. 상태변화는 reducer 함수가 처리한다.
상태변화를 유발하는 dispatch 함수가 호출이 되면 reducer함수를 실행시키게 된다. 이때 dispatch 함수를 호출하면서 어떠한 상태변화가 일어나야 되는지의 정보를 인수로 전달해야 하고, 보통은 객체로 전달한다.
이후 reducer 함수의 매개변수로 현재의 State값과, dispatch에서 전달한 객체가 action라는 이름으로 전달된다. 그래서 dispatch에서 전달하는 객체를 ‘action 객체’라고 부른다
reducer 함수가 어떤 동작을 한 뒤 어떤 값을 반환하면 그 값으로 count State값을 업데이트시킨다.
위의 코드는 카운트 버튼에서 - 버튼을 눌렀을 때 1씩 줄어들게 하는 코드이다.
흐름을 이해해 보자.
1. 버튼을 클릭하면 dispatch 함수가 실행되면서 reducer 함수를 호출한다. 그리고 action 객체를 reducer 함수에게 전달한다.
2. reducer 함수는 현재의 state값과 action 객체를 인수로 전달받는다.
3. 그리고 reducer 함수가 반환하는 값으로 state값을 업데이트시킨다.
+++
오히려 useState보다 복잡해 보여서 안 쓰겠지 싶었다. 근데 action 객체도 분리하면 더 깔끔하지 않을까라는 생각이 들어서 분리해 봤더니 훨씬 깔끔해졌다. 복잡한 로직을 구성할 때 많은 도움이 될 것 같다
'프로그래밍 언어 > React 기초' 카테고리의 다른 글
리액트 Context (0) | 2023.11.16 |
---|---|
리액트 최적화(useMemo,React.memo,useCallback) (0) | 2023.11.15 |
리액트 todoList 체크박스 수정, 삭제 (0) | 2023.11.13 |
리액트 todoList 렌더링,서치바 만들기 (0) | 2023.11.10 |
리액트 todoList <input> 관련 기능들 (0) | 2023.11.08 |