[React]useReducer

✔useReducer란?

상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해는데, useReducer는 usestate 처럼 state를  생성하고 관리 할수 있게 해주는 도구입니다.

 

이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있습니다.

 

'분리시키는 것을 가능하게 해준다'는 것은,
State 업데이트 로직을 또다른 파일에 작성해서 (분리), 분리된 파일을 불러와서 사용하는 것도 가능하다는 뜻도 된다.

 

· useState를 사용한 경우 : 컴포넌트 내부에 State 업데이트 로직이 존재

· useReducer를 사용한 경우 : 컴포넌트 외부에 State 업데이트 로직이 존재

언제사용 하면 좋을까?

여러개의 하위 값을 포함하는 복잡한 state를 다뤄야 할때 useReducer를 사용하면 코드를 훨신 깔끔하게 사용할수 있고 유지보수도 한결 편해진다.

 

useReducer을 알기전에 3가지 Reducer , Dispatch , Action에 대해 알아야 하는데 useReducer는 이 3가지로 이루어져 있기 때문이다.

reducer - state를 업데이트 하는 역할

dispatch - sate 업데이트를 위한 요구

action - 요구의 내용

• state안에 데이터가 있다면 → 직접 수정 불가능
• 수정하고 싶으면 action을 만들어서 수정해야함
• action을 만든 후 dispatch에 하면 state 수정가능

[예제1]

예금을 누르면 입력한 숫자 만큼 잔고가 + 되고 출금을 누르면 입력한 숫자만큼 잔고가 - 되는 함수를 만들어 보자

useReducer는 usestate와 비슷하게 배열을 반환해 주는데 배열의 첫번째 요소에는 새로 만들어준 state가 들어있고 두번째 요소에는 dispath 함수가 들어있다.

useReducer는 인자를 2개 받는데 첫번째 인자에는 reducer를 받고 두번째 인자에는 money state의 초기값을지정해준다(0) 

reducer 함수는 두개의 인자를 받는데 첫번째 인자로는 현재 state ,두번째 인자로는 action을 받는데 state를 변경하는 요구에 대한 내용이 들어간다 .

 

action 을 만들어 준후 dispatch 를 사용해 변경할 함수를 보내준다 action에는 변경된 값이 입력 된다.

잔고를 표시해 주고 싶기 때문에 기본 state(0) 에 payload 한 값을 더해주면 잔고가 변경이 된다 .

출금 로직도 마저 짜주자 swtich case문을 사용해 주었다.