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

React 19 서버 컴포넌트 데이터 페칭

풀
풀스택지망
조회 767댓글 4

React 19 서버 컴포넌트 데이터 페칭 관련 문제입니다.

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

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

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

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

이전 글
PostgreSQL toast 테이블 이해
다음 글
Nginx worker_connections 최적 값

댓글 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로 등록