HTML 파일에 React 올리기 (CDN, Babel)
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. CDN을 통해 React를 사용할 때 필요한 스크립트가 아닌 것은?
💡 CDN 방식의 React에는 react 코어, react-dom, babel standalone 세 가지가 필요합니다. webpack은 npm 기반 프로젝트에서 사용하는 번들러로, CDN 방식에서는 필요하지 않습니다.
Q2. JSX 코드가 포함된 script 태그에 반드시 추가해야 하는 속성은?
💡 Babel Standalone은 type="text/babel" 속성이 있는 스크립트 태그를 찾아 JSX를 일반 JavaScript로 변환합니다. 이 속성이 없으면 브라우저가 JSX 문법을 이해하지 못하고 오류가 발생합니다.
Q3. Babel의 역할로 올바른 것은?
💡 Babel은 JSX 문법을 브라우저가 이해할 수 있는 JavaScript 함수 호출(React.createElement())로 변환합니다. JSX는 문법적 편의를 위한 것이며, 실제로는 React.createElement() 호출입니다.
Q4. React 18에서 컴포넌트를 DOM에 렌더링하는 올바른 코드는?
💡 React 18에서는 ReactDOM.createRoot()로 루트를 먼저 생성한 후 .render()를 호출하는 방식을 사용합니다. React 17 이하에서 사용하던 ReactDOM.render()는 React 18에서 deprecated되었습니다.
Q5. react와 react-dom이 별도의 패키지로 분리된 이유는?
💡 react 코어는 플랫폼에 무관한 컴포넌트 로직을 담고, react-dom은 브라우저 DOM과의 연결을 담당합니다. 이 분리 덕분에 같은 React 코어로 웹(react-dom), 모바일(react-native), VR(react-360) 등 다양한 플랫폼을 지원할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.