[011] 리액트 (React) 배우기 - useReducer Hook 사용

안녕하세요~ totally 개발자입니다.

 

useReducer Hook

 

오늘은 useReducer 훅에 대해 살펴보겠습니다. 사실 useReducer는 useState랑 용도는 같으나 더 복잡한 로직을 처리하기 위해 사용된다고 보시면 되며 예제를 위해 div 박스를 상하좌우로 버튼을 클릭해서 움직일 수 있는 코드를 작성해보도록 하겠습니다. 

 

Step 1: 먼저 컴포넌트에 Direction.js 파일을 생성후 다음처럼 useReducer를 import 하시고 reducer 함수를 작성해줍니다. reducer에는 state 변수(업데이트할 변수명)와 action이 인자로 전달됩니다. 이것을 보통 switch를 활용하고 여기에서는 action.type (변경 가능)을 사용하여 스위치로 조건문을 만들어서 return 해주게 됩니다. 저는 x, y 좌표로 left값과 top값을 갱신해줄 것이기 때문에 배열로 return 해줍니다. 

 

 

 

Step 2: 그 밑에 Direction 함수를 작성해주고 19번째 줄에 const [coordinate, dispatch] = useReducer(reducer, [70, 100]) 이렇게 선언해줍니다. const [상태, 상태 변경할 함수명 즉 dispatch로 쓰임] = useReducer(조건함수, 초기 상태값) 이렇게 들어갑니다. [70, 100]을 넣는 것은 x값 70, y값 100으로 초기화를 해준 것입니다. 24~27번째 줄에 보시면 onClick 함수에 dispatch 함수에 type으로 각각 'LEFT', 'UP', 'DOWN', 'RIGHT'으로 인자를 전달해주었습니다. 마지막으로 29번째 div 박스에 left와 top의 값을 각각 coordinate 좌표 배열의 0번째 인덱스(x값), 1번째 인덱스(y값)를 변수로 전달해서 갱신하면 완료입니다. 

 

 

 

 

Step 3: App.js에 다음처럼 Direction 컴포넌트를 넣어줍니다.

 

 

Step 4: 결과는 아래와 같습니다. 

 

 

[소스 코드]