<div id="readability-page-1" class="page"><div id="entry-view">
        
        <main>
          <div>
              <article id="mainContent">
                <div>
                  <p><a href="/m/category/FRONTEND/REACTJS"><span>FRONTEND/REACTJS</span></a></p><h3>CRA로 만든 react app v17로 변경하기</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 7. 4. 12:00</span>
                </p>
                                <div>
                                <p data-ke-size="size16">react가 얼마전 18버전으로 업데이트가 되었죠</p>

<p data-ke-size="size16">그래서 <a href="https://ko.reactjs.org/docs/create-a-new-react-app.html" target="_blank" rel="noopener">CRA</a>로 react app을 만들게 되면 react 18 버전으로 시작하게 됩니다</p>

<p data-ke-size="size16">react 18버전이 아닌 17버전을 사용하고 싶으시다면</p>

<p data-ke-size="size16">직접 의존성을 리액트 17버전으로 변경해주시면됩니다</p>

<p data-ke-size="size16">package.json에서 react, react-dom을 17 버전으로 변경해주시고</p>

<p data-ke-size="size16">testing-library/react도 react 17버전에서 사용가능한 버전으로 함께 변경이 필요합니다</p>

<pre id="code_1656669514897" data-ke-language="javascript" data-ke-type="codeblock"><code>// package.json
{
	"@testing-library/react": "^12.1.4",
	"react": "^17.0.2",
	"react-dom": "^17.0.2",
}</code></pre>

<p data-ke-size="size16">그리고 다시 의존성 모듈을 설치해주세요</p>

<pre id="code_1656669542753" data-ke-language="javascript" data-ke-type="codeblock"><code>npm i</code></pre>

<p data-ke-size="size16">추가로 index.js의 react renderer호출부분을 아래와 같이 변경해주시면 됩니다</p>

<pre id="code_1656669447839" data-ke-language="javascript" data-ke-type="codeblock"><code>// index.js
import { render } from "react-dom";
...
const container = document.getElementById("root");
render(&lt;App /&gt;, container);</code></pre>

<p data-ke-size="size16">v18에서는 react-dom/client을 통해 렌더링을 하도록 변경되었기 때문에 이부분고 v17에서 쓰는 형태로 변경이 필요합니다</p>









            
            
                </div>
                
              </article>
              
                
              
              
              
              
              
                
              
            </div>
        </main>
        
      </div></div>

나를 찾는 아이

Kyoung min, Kim

react가 얼마전 18버전으로 업데이트가 되었죠
 
그래서 CRA로 react app을 만들게 되면 react 18 버전으로 시작하게 됩니다
 
react 18버전이 아닌 17버전을 사용하고 싶으시다면
 
직접 의존성을 리액트 17버전으로 변경해주시면됩니다
 
package.json에서 react, react-dom을 17 버전으로 변경해주시고
 
testing-library/react도 react 17버전에서 사용가능한 버전으로 함께 변경이 필요합니다
 
// package.json
{
	"@testing-library/react": "^12.1.4",
	"react": "^17.0.2",
	"react-dom": "^17.0.2",
}
 
그리고 다시 의존성 모듈을 설치해주세요
 
npm i
 
추가로 index.js의 react renderer호출부분을 아래와 같이 변경해주시면 됩니다
 
// index.js
import { render } from "react-dom";
...
const container = document.getElementById("root");
render(<App />, container);
 
v18에서는 react-dom/client을 통해 렌더링을 하도록 변경되었기 때문에 이부분고 v17에서 쓰는 형태로 변경이 필요합니다

CRA로 만든 react app v17로 변경하기

댓글