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

React 20 RC 새 렌더링 개선 사항

코
코딩하는민수
조회 1266댓글 5

React 20 RC 새 렌더링 개선 사항 관련 문제입니다.

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

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

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

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

이전 글
AI 코딩 어시스턴트 비교 총정리 2025
다음 글
TypeScript 6 패턴 매칭 사용법

댓글 5

김김영삼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 })

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

코코딩하는민수1년 전

한 가지 더 여쭤봐도 될까요

실제로 프로덕션에서 적용할 때 주의할 점이 있을까요?

김김영삼1년 전

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

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

데데이터사이언스현1년 전

다른 관점에서 말씀드리면 React 20 RC 새 렌더링 개선... 관련해서는 공식 문서 외에 실전 경험이 중요한 것 같습니다.

코코딩하는민수1년 전
역시 대단하십니다 감사합니다!
Ctrl+Enter로 등록