inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[React 2부] 고급 주제와 훅

[4.3장 리듀서 훅] 4.3.9 중간 정리

MyReact.useReducer로 Validate를 구현한 부분을 이상적으로 처리하려면?

306

지호손

작성한 질문수 39

0

안녕하세요. Reducer는 ReactJS에서 제공하는것을 거의 잘 안써왔었는데 한번 활용해봐야겠다는 마음이들었던 강의였습니다.

 

이번 4.3장(리듀서 훅) 수강하고 궁금한 부분은 Validate처리가 일반적으로 dispatch만으로 해소가 안되는 부분을 직접 reducer를 호출해줘서 처리하는 부분을 봤습니다. 직접 리듀서를 호출하는 형태가 조금 리듀서를 만든 의도와 다른 방향같기도한데.

 

이전상태를 이용해서 앞으로의 상태를 업데이트하고 싶을때 dispatch를 사용해야한다면 어떻게 처리되야 조금 더 이상적인 방향이라고 생각하시나요?

react React-Context react-hooks react-router react-component

답변 1

0

김정환

상태를 변경은 디스패치로만 해야할 것 같은데 리듀서를 직접 호출한 부분을 의아하게 보신 것 같습니다.

리듀서 훅은 함수 컴포넌트가 실행될 때마다 스토어가 관리하는 상태를 스냅샷처럼 반환해 줍니다.

  • 첫번재 렌더링 시점의 스토어 상태

  • 두번째 렌더링 시점의 스토어 상태

  • ...

이런식으로 렌더링 당시의 스토어 상태를 가지고 리액트 앨리먼트를 계산하는 구조인데요.

 

여기 예제의 handleSubmit에서는 밸리데이션 한 결과를 이용해 후속처리를 하는 로직이 있습니다. 밸리데이션은 액션만 디스패치하기 때문에 현재 렌더 시점에는 밸리데이션 이후의 달라진 상태에 접근할수가 없습니다. 그래서 리듀서에게 직접 상태와 액션을 전달해 다음 상태를 계산하도록 한 것이에요. 그러면 리듀서는 밸리데이션 한 결과가 반영된 상태를 바로 반환할 겁니다.

 

저도 이런 방식을 처음 접했을 때는 좀 해키해보이긴 했는데요. 리듀서를 사용하는 일반적인 모습인 것 같습니다. 리액트 공식 문서에도 안내하고 있어서 참고해 보시면 이해하는데 도움이 되실겁니다.

잘못된 useEffect 사용?

1

65

2

useEffect 의존성 질문

1

58

2

orderableProductItem 에 관하여...

0

57

2

강의 자료, 블로그, 깃 주소

0

63

1

React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)

1

104

2

pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.

1

87

2

FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유

1

123

1

dispatch 함수도 리렌더링 유발하지 않나요?

1

203

2

ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유

1

160

2

replaceState를 쓰지 않는 대안

1

196

2

setValue 메서드를 바인딩 해야 하는 이유

1

163

2

MyReact를 IIFE(즉시실행함수)로 설계하신 이유

0

209

2

[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

0

129

1

useRef 관련하여 질문드립니다

0

152

2

렌더 프롭 관련하여 질문드립니다

0

183

2

[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.

1

395

2

[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.

1

317

2

[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.

1

355

2

[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.

1

281

2

[4.1장 레프 훅] useRef관련 질문이있습니다.

1

334

1

[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다

2

284

1

[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.

1

432

2

[1.3.6 상태정의] state 관련

1

259

1

[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.

1

272

1