본문 바로가기
Q&A해결2025년 2월 3일1분 읽기

React Hook Form 복잡한 중첩 폼 처리

보
보안엔지니어
조회 1193댓글 4

React Hook Form 복잡한 중첩 폼 처리 관련 문제입니다.

아래 코드에서 예상과 다르게 동작합니다:

const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetchData().then(res => {
    setData(res)
    setLoading(false)
  })
}, [])

개발 환경에서는 잘 되는데 프로덕션 빌드 후 간헐적으로 데이터가 null인 상태로 렌더링됩니다. React 버전은 19입니다.

이전 글
Tailwind v4 기존 v3 프로젝트 마이그레이션
다음 글
Docker 이미지 2GB 넘는데 줄이는 방법

댓글 4

김김영삼1년 전

이 문제는 비동기 상태 업데이트 타이밍 이슈입니다.

React 19에서는 Automatic Batching이 강화되어 두 개의 setState가 한 번의 리렌더링으로 처리될 수도, 아닐 수도 있습니다.

해결 방법
// 방법 1: 하나의 상태로 합치기
const [state, setState] = useState({ data: null, loading: true })

useEffect(() => {
  fetchData().then(res => {
    setState({ data: res, loading: false })
  })
}, [])

// 방법 2: useReducer 사용
const [state, dispatch] = useReducer(reducer, { data: null, loading: true })

상태를 하나로 합치면 항상 원자적으로 업데이트됩니다.

보보안엔지니어(guest)1년 전
한 가지 더 여쭤봐도 될까요실제로 프로덕션에서 적용할 때 주의할 점이 있을까요?
김김영삼1년 전

추가 질문에 답변드립니다.

말씀하신 경우에는 상황에 따라 다르지만, 일반적으로는 공식 문서의 권장 방식을 따르는 것이 가장 안전합니다. 실무에서는 팀 규모와 프로젝트 특성에 맞게 조정하시면 됩니다.

보보안엔지니어(guest)1년 전
덕분에 해결했습니다!
Ctrl+Enter로 등록