-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
React 18에서 ReactDOM.render()를 지원하지 않는 문제
24.02.21 18:59 작성 조회수 340
1
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18버전에서는 ReactDOM에 렌더링하는 방식이 아니라 root를 먼저 만들고 root의 렌더링을 하는 방식으로 바뀌었다고 합니다.. 먼저, 실습 자료에서 따라 작성했던 코드입니다. import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import NotificationList from "./chapter_06/NotificationList";
ReactDOM.render(
<React.StrictMode>
<NotificationList />
</React.StrictMode>,
document.getElementById('root')
)
reportWebVitals(); Notification element는 순서대로 제대로 출력되는걸 보아서 JSX element는 제대로 작성한 것 같았고 콘솔 로그가 나오지 않으며 위에 작성한 오류만 나와 react 버전 문제인가 해서 공식문서를 참조해 다음과 같이 변경했습니다. import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import NotificationList from "./chapter_06/NotificationList";
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<NotificationList />
);
reportWebVitals();
ReactDOM을 직접 사용하지 않고, root를 만든 다음 root에서 렌더링을 하는 방식으로 변경하라고 해서 이렇게 했더니 콘솔 로그가 제대로 나왔습니다. 그런데 문제가 있는게 이전에는 Notification element가 1, 2, 3 순서대로 출력이 되었는데 root에 직접 렌더를 하니 1번과 2번 element가 동시에 출력되는 문제가 생깁니다.. 
로그를 확인해보니 1번 2번 element는 componentDidMount() 이후 Update()를 실행하지 않고 WillUnmount()가 되어버립니다. WillUnmount() 이후에 한 번 더 DidMount()가 되고, Update()로 넘어가지만, 이 이후에도 1번 2번이 같이 호출되고, 그 다음에 3번이 호출됩니다. 3번 역시 DidMount() 이후 Update() 없이 WillUnmount()되고 다시 DidMount()가 됩니다 3번은 Update()되지 않습니다.. 이 이후에는 공식문서에서 해결책을 찾을수가 없어서 문의드립니다..
답변을 작성해보세요.
0
Inje Lee (소플)
지식공유자2024.02.21
안녕하세요, 소플입니다.
AI 인턴이 잘 답변해준 것 같은데, 해당 부분은 리액트 버전18에서 변경된 Strict Mode의 동작때문입니다.
아래 답변을 참고하시면 더 도움이 되실 겁니다!
https://www.frontoverflow.com/question/19/React.StrictMode%EB%8A%94%20%EB%AD%94%EA%B0%80%EC%9A%94%3F
감사합니다.
0
인프런 AI 인턴
2024.02.21
안녕하세요, 인프런 AI 인턴입니다. Skyleester님의 질문과 유사한 상황에 대한 답변은 아래의 링크에서 찾아볼 수 있습니다.
React 18에서 ReactDOM.render()로 발생하는 문제와 관련하여, 강의 내용이 React 17 버전을 기준으로 제작되어있어 18 버전에서 발생하는 변경 사항에 대응하지 않는 경우가 있습니다. 이로 인해 업데이트된 React 사용법을 강의가 따라가지 못하는 상황으로 보이며, createRoot 방식으로 변경하는 것이 올바른 접근 방식입니다. React 18에서는 더 나은 동시성(concurrency)을 활용하기 위해 렌더링 방식이 변경되었습니다.
질문에서 언급하신 componentDidMount() 이후에 componentDidUpdate()를 실행하지 않고 componentWillUnmount()가 되는 현상은 StrictMode 때문일 가능성이 있습니다. React의 StrictMode는 개발 모드에서 부수 효과를 찾기 위해 컴포넌트를 마운트, 언마운트, 그리고 다시 마운트하는 등 추가적인 검사를 수행합니다.
이는 다음과 같은 답변에서 언급되고 있습니다:
- unmount 관련 질문
위 링크의 답변에서 설명하듯이, StrictMode가 겹치거나 콜백 함수 등이 올바르게 정리(clean up)되지 않아 생명주기 함수가 여러 번 실행되는 것을 보였습니다. StrictMode가 컴포넌트 생명주기 함수의 예상치 못한 실행을 초래할 수 있다는 점에 주목하시기 바랍니다.
추가적인 문제 해결을 위해서는 React 18의 변경점에 대해 보다 자세히 다룬 다음의 답변을 참고하시는 것이 좋습니다:
- index.js 코드 질문!!
해당 링크에서는 리액트 버전을 업데이트할 때 createRoot 메소드를 사용하는 새로운 컴포넌트 렌더링 방식에 대해 설명하고 있습니다. 또한, StrictMode에 의한 영향을 받지 않도록 코드를 조정하는 방법에 대해서도 이해를 돕고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
답변 3