인프런 커뮤니티 질문&답변

김혜나님의 프로필 이미지
김혜나

작성한 질문수

처음 만난 리액트(React)

(실습) 직접 리액트 연동하기

섹션2 리액트 가져오기에서 react@17 말고 18을 불러와도 상관없나요?

작성

·

546

1

안녕하세요! 실습을 하던 도중 react@17 을 가지고 오는 것을 알게되었습니다! 현재 react@18도 나온 것 같은데 17로 실습하는게 나은지 18로도 해도 되는건지 여쭤보고 싶었습니다. 밑에 처럼 바꿔도 되는걸까요?

<!-- 리액트 가져오기 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- 리액트 컴포넌트 가져오기 -->
    <script src="MyButton.js"></script>

답변 1

1

Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

안녕하세요, 소플입니다.

 

리액트 버전 18을 사용하려면 script 태그 부분을 아래와 같이 해주시면 되고,

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

추가로 MyButton.js의 코드가 아래와 같이 ReactDOM.createRoot()를 사용하는 형태로 변경되어야 합니다.

function MyButton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(MyButton));

 

그리고 이후 3강부터 나오는 실습은 아래 리액트 버전18 기준 코드를 참고해서 진행해주시기 바랍니다!

https://github.com/soaple/first-met-react-practice-v18

 

감사합니다.

김혜나님의 프로필 이미지
김혜나

작성한 질문수

질문하기