공부/React

노마드코더 강의 : React 시작하기 (고전 방법)

래코드 2023. 1. 27. 17:47

리액트를 복습하며 노마드코더의 ReactJS로 영화 웹 서비스 만들기 강의 내용을 포스팅 하기로 했다.

01. React 탄생

메타(구 페이스북)는 javascript의 불편한 점을 개선하기 위해 ReactJS를 만들었다.
리액트는 바닐라 자바스크립트를 사용하는 것보다 빠르고 쉽게 인터랙티브한 요소를 만들 수 있게 도와준다.
document.querySelector, addEventListener 등 지루한 코드를 반복해서 쓰지 않아도 되기 때문에 코드가 깔끔해진다.

02. HTML 파일에서 React 기본 설정

요즘은 쉽고 빠르게 ReactJS를 시작할 수 있지만, html 파일에서 고전 방법으로 React를 시작하는 법도 알면 좋다.

1. CDN 사용하기

React와 ReactDOM 이 필요하다. (링크)

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

2. root 만들기

React는 기본적으로 script로 시작해서 html로 끝난다.
모든 구성 요소는 script에서 만들어져서 root를 통해 html에 그려지기 때문에,
body tag 안에는 우선 root 요소 하나가 필요하다.

<body>
    <div id="root"></div>
</body>

3. root 안에 들어갈 요소 만들기

root 안에 container라는 요소를 넣어본다.
React.createElement(html태그, 태그의 속성, 태그의 콘텐츠) 코드를 사용해서 만들 수 있다.

const container = React.createElement("div", null, "Hello world!");


위의 코드를 통해 container라는 div태그를 script로 만들었다.
속성은 우선 주지 않아 null이고, 내용은 "Hello world!" 다.
속성은 object 로 전달할 수 있다.

ex) 

const container = React.createElement(
    "div",
    {
        id: "container",
        style: { backgroundColor: "green", color: "white" },
    },
    "Hello world!"
);


4. root 그리기 (render)
react-dom의 ReactDOM.render(요소, 요소를 넣을 공간) 코드를 사용해 html를 그려주면 기본 설정이 끝난다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script>
        const root = document.getElementById("root");
        const container = React.createElement("div", null, "Hello world!");
        ReactDOM.render(container, root);
    </script>
</html>