[노마드코더 - ReactJS로 영화 웹 서비스 만들기] #2 The Basics of React

Weirdo·2023년 1월 3일

React reactjs 노마드코더

[노마드코더] ReactJS로 영화 웹 서비스 만들기

목록 보기

2/2

# 2.0 Introduction

ReactJS는 UI를 interactive하게 만든다. 웹사이트에 interactivity(상호작용)을 만들어준다.

# 2.1 Before React

ReactJS를 설치하기 위해서는 두 개의 Javascript code를 import 해야한다.

1. html에 react, react-dom를 import 해야한다.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
</body>
</html>

2. 브라우저 console에서 React가 import 되었는지 확인할 수 있다.

# 2.2 Our First React Element

ReactJS는 우리가 해왔던 방식을 거꾸로 하고 있다. 바닐라JS에서는 HTML을 먼저 만들고, Javascript로 가져와서 HTML을 수정하는 방식이었다. 하지만 ReactJS는 모든 것이 Javascript로부터 시작된다. Javascript에서 HTML이 생성된다. Javscript를 이용해 Element를 생성하고, ReactJS가 HTML로 번역한다.

HTML 코드를 직접 작성하지 않는다.
Javascript에서 ReactJS를 이용해서 작성한다.
Render의 의미는?
React Element를 가지고 HTML로 만들어 배치해 사용자에게 보여준다는 것이다.

<!DOCTYPE html>
<html lang="en">
<body></body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
    const span = React.createElement("span");
    ReactDOM.render();
</script>
</html>

# 2.3 Events in React

하나의 statement로 한번에 HTML을 만들고, content를 추가하고, eventListener도 등록할 수 있다.

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
    const root = document.getElementById("root");
    const h3 = React.createElement("h3", {
        onMouseEnter: () => console.log("mouse enter"),
    }, "Hello, I'm span!");
    const btn = React.createElement("button", {
        onClick: () => console.log("im clicked"),
    }, "Click Me");
    const container = React.createElement("div", null, [h3, btn]);

    ReactDOM.render(container, root);
</script>

</html>

# 2.4 Recap

ReactJS와 ReactDOM을 import한다.
ReactJS는 Element를 생성하고, EventListener를 더하는 것을 도와준다.
ReactDOM은 React Element를 HTML로 바꿔준다.
ReactJS로 Element를 생성한다.
Property object에 Event Listener를 등록할 수 있다.
덕분에 ReactJS로 interactive App을 만들어낼 수 있다!!!!
ReactDOM으로 Render한다.
React Element들을 root div 안에서 보여준다.

# 2.5 JSX

JSX는 Javascript를 확장한 문법으로, React요소를 만들 수 있게 해준다. 생긴 게 HTML과 비슷하다.

// JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// Javascript
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Babel을 이용해 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

브라우저에서 실행해보면 script tag에는 Babel에게 넘겨준 코드가 있고, head tag에는 Babel이 브라우저가 읽을 수 있게 바꾼 코드가 담겨있다.

# 2.6 JSX part Two

직접 만든 컴포넌트의 첫번째 글자는 반드시 대문자로 해야한다! html tag와 구분이 가능해지기 때문이다!!!
JSX는 어플리케이션을 여러가지 작은 요소로 나눠서 관리할 수 있게 해준다.
SUPER COOL!

Weirdo

Yeah, weirdos change the world

이전 포스트

[노마드코더 - ReactJS로 영화 웹 서비스 만들기] #2 The Basics of React