react.com >> Docs >> MAIN CONCEPTS >> 1. Hello World에 있는 내용입니다.
드디어 Hello World에 들어왔습니다.
프로그램 언어를 배운다 하면 'Hello World'부터 찍고 시작해야 하는데, 생각보다 Getting Started가 내용이 많았습니다. 본격적으로 들어가 보도록 하겠습니다.
다음은 가장 최소화한 리액트 예제입니다. 사이트에 딱 나와있는 내용입니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);이 예제는 페이지에서 'root' 아이디를 가진 태그를 찾아서 'Hello, world!'를 찍어줍니다.
자, 잘 찍히는지, 위 내용을 index2.html로 저장하고 더블클릭해서 열어보겠습니다.
생각대로 안나오네요.
이전 페이지보다, 이 페이지는 좀 불친절합니다. 알아서 해야 하는 부분이 좀 있네요.
일단 스크립트 태그로 리액트 라이브러리를 가져와야 합니다. ReactDOM.render() 함수는 라이브러리에 들어있는 함수니까요. 두 번째로 'root' 아이디를 가진 태그를 만들어 줘야 합니다. 리액트의 내용이 들어가는 컨테이너죠.
추가를 해보겠습니다.
<html>
<head>
<!-- 리액트 라이브러리 추가 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div> <!-- 'root' 컨테이너 추가 -->
</body>
</html>이렇게 코드를 추가해봤습니다. 실행을 시켜보면~
아무것도 안 나옵니다. 역시 너무 쉽게 해결된다 했네요.
별것 아닌 내용으로 하루를 헤매다가, '1분 안에 추가하는 리액트' 예제에 해답이 있는 걸 알게 됐습니다.
<html>
<head><meta charset="UTF-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- 이줄이 추가됐습니다. -->
<script type="text/babel"> <!-- 여기는 type="text/babel" 이 추가됐습니다.-->
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>babel이라는 부분이 추가됐는데, 왜 이 부분이 있어야 실행이 되는지는 잘 모르겠습니다.
이 부분도 천천히 살펴보겠습니다.
간단한 프로그램도 실제 실행하려면, 상당한 시행착오를 거쳐야 하는 경우가 많습니다. 그래서 실제로 해보고 체득하는 게 좋은 방법인 것 같습니다.
'IT' 카테고리의 다른 글
| [영어로 배우는 React] 3. 엘리먼트 랜더링 (0) | 2022.04.07 |
|---|---|
| [영어로 배우는 React] MAIN CONCEPTS - 2. JSX 소개 (0) | 2022.03.18 |
| [영어로 배우는 React] 시작하기. Just do it!!! (1) | 2022.03.15 |
| [영어로 배우는 React]1. 그래서 React가 뭔데? (1) | 2022.03.08 |
| 개발자가 영어를 잘하면 좋은 5가지 이유 (0) | 2022.03.03 |