인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

지호손님의 프로필 이미지
지호손

작성한 질문수

[리액트 2부] 고급 주제와 훅

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

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

작성

·

249

0

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

 

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

 

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

답변 1

0

김정환님의 프로필 이미지
김정환
지식공유자

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

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

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

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

  • ...

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

 

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

 

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

지호손님의 프로필 이미지
지호손

작성한 질문수

질문하기