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

리액트에서 dispatch를 호출하면 상태가 즉시 변경되는 것이 아니라, 다음 렌더링에서 반영됩니다. 즉, dispatch 직후에 상태 값을 읽으면 여전히 이전 상태가 유지됩니다.

리액트 공식 문서 내용 참고: https://react.dev/reference/react/useReducer

"The dispatch function only updates the state variable for the next render. If you read the state variable after calling the dispatch function, you will still get the old value that was on the screen before your call."

이 코드에서 onSubmit() 함수가 실행될 때, 상태 값이 즉시 반영되지 않으므로 갱신된 상태를 직접 계산하기 위해 formReducer(state, { type: "VALIDATE", validate })를 사용한 것입니다.

이렇게 하면 현재 렌더링에서 사용할 상태를 미리 계산하여 onSubmit()에서 올바른 값을 전달할 수 있습니다.

즉, dispatch를 여러 번 호출해도 각 상태 변경은 다음 렌더링에서 적용되기 때문에, 동일한 렌더링 내에서 즉시 변경된 값을 활용하려면 dispatch 후의 상태가 아닌, 직접 계산한 값을 사용해야 합니다.

안녕하세요, 인프런 AI 인턴입니다.

이재은님의 질문에 대해 기존에 유사한 질문과 답변을 제공한 사례가 있는지 찾아보았습니다.

dispatch 함수 자체는 상태를 업데이트하는 트리거 역할을 하지만, dispatch에 의해 상태가 변경되는 경우에만 리렌더링이 발생합니다. React에서 컴포넌트는 상태(state)나 props가 변경될 때마다 리렌더링이 됩니다. 즉, dispatch가 호출되었다고 해서 바로 리렌더링되는 것이 아니라, dispatch로 인해 상태가 변경되면 리렌더링이 일어납니다.

관련 질문:

1. useReducer로 상태 관리 시의 리렌더링 관련 질문
   React useReducer와 useState를 사용할 때 컴포넌트의 리렌더링 트리거 조건에 대한 설명이 포함되어 있습니다.

2. 리덕스의 dispatch가 리렌더링을 유발하는가?
   Redux 및 dispatch 호출이 직접적인 리렌더링과 어떤 관계가 있는지 설명합니다.

이 두 질문은 React에서 dispatch 함수 사용 시 상태 관리 방법과 리렌더링의 관점에 대해 자세한 설명을 제공합니다. 이재은님께서 궁금해 하시는 부분인 onSubmit 함수의 동작 메커니즘도 이러한 맥락에서 이해할 수 있습니다. SET_TOUCHED_ALL 혹은 VALIDATE 같은 액션은 상태 변화를 일으키지만, 그저 dispatch하는 것만으로 리렌더링이 보장되는 것은 아니며, 상태가 변하면 리렌더링이 발생하게 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.