총 3번에 걸쳐 리액트 Hook에 대해 알아보고 문제를 풀어보았다.
이번에 풀어본 useReducer는 리덕스를 먼저 한번 봐보고 풀어서 그런지
마지막 3번문제를 제외하고는 풀만 하였다.
하지만 아직까지 dispatch, reducer, useReducer에 각각 어떤
인자를 주어야하는지 헷갈린다.
이 개념은 리덕스에서까지도 계속 쓰이니 헷갈리지않게
계속 반복해서 완벽히 알아보도록하자.
문제 1. useReducer()를 이용하여 다음과 같은 결과를 출력하는 코드를 작성하세요.
1번 코드 풀이
useReducer 함수에 넣을 reducer인 priceReducer를 선언해준다.
useReducer를 이용한 state를 0으로 초기화해준다.
클릭했을 때 dispatch 함수를 실행할 함수를 선언해준다.
(clickHamburger, clickPotato, clickBeer)
state 값(지불할 금액)을 브라우저에서 보여준다
각 버튼에 click 이벤트가 발생할때 dispatch함수를 실행할 함수를 넣어주었다.
문제 2. useReducer()를 이용하여 다음과 같은 결과를 출력하는 코드를 작성하세요.
조건
- <input type = "number">로 생성, 한번 클릭시마다 1000씩 증가 or 감소
- 금액을 입력하고 입금 또는 출금 버튼을 클릭하면 현재 잔액을 출력
2번 코드 풀이
1. useReducer 함수에 넣을 reducer함수(accountReducer)를 선언한다.
2. useReducer 함수를 이용한 state를 초기화한다.
3. input에서 입력한 숫자를 담아놓을 state를 설정한다.
4. 클릭했을 때 dispatch 함수를 실행할 함수를 선언한다.
5. input 태그에서 입력 이벤트가 발생하면, money의 값이 재할당 된다.
6. 입금, 출금 각각 버튼click 이벤트가 발생했을 때 해당 함수(clickDeposit, clickWithdraw)를 각각 실행한다.
7. state 값(money)이 브라우저에서 보여진다.
문제 3. useReducer()을 이용하여 다음과 같은 결과를 출력하는 코드를 작성하세요.
3번 코드 풀이
1. 랜덤아이디 값을 만들 함수(uId)를 선언해준다.
2. useReducer함수에 넣을 reducer함수(personReducer)를 선언한다.
3. useReducer함수를 이용한 state를 초기화한다.
4. input 태그에서 입력할 때 값을 담을 state를(info) 설정한다.
5. input 태그에서 onChange 이벤트가 발생했을 때 실행할 함수를 선언해준다.
[e.target.name]을 통하여 key값이 동적으로 들어간다.
6. 클릭했을 때 dispatch함수를 실행할 함수(addPerson)을 선언한다.
input에서 입력받아서 만들어진 info값을 action으로 넣어준다.
7. 클릭했을 때 dispatch함수를 실행할 함수(deletePerson)을 선언한다.
이벤트가 발생한 태그의 value(idx) 값을 action에 넣어준다.
8. state의 속성인 count값(전체 회원 수)를 브라우저에 보여준다.
9. onChange 이벤트가 발생하면, info(4번에서 설정한 state)에 동적으로 값이 들어간다.
10. state.member 값으로 map()함수를 돌려서 테이블에 동적인 값을 넣어준다.
11. 버튼 태그에 value값으로 idx값을 넣어준다.
따라서 2번에서 선언한 type이 delete인 reducer를 통해 필터링이 되고,
idx가 다른 요소들만 다시 state에 담기게 되어 해당 idx의 요소를 제거하는 원리이다.
