본문 바로가기
FrontEnd/React

[ReactJS] Introduction & The Basics of React - ReactJS 로 영화 웹 서비스 만들기 (1)

by 풍파 2021. 11. 24.

 

https://nomadcoders.co/react-for-beginners

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React Fundamentals

nomadcoders.co

 

이미 수강했던 강좌지만 이번에 2021년 기준으로 업데이트 됐다.

시간도 얼마 안걸리니까 개념도 다시 볼 겸 재수강 시작!!

 

 

 

 

#1. Introduction

 

ReactJS 를 사용해야하는 이유

- 넷플릭스, 에어비앤비 등 많은 유명 웹 사이트에서 사용
- 페이스북에서 개발하고 지원 -> 수명이 짧지 X
- 대규모의 커뮤니티 (JS 와 함께)

 

 

ReactJS 의 특징

- UI 를 interactive 하게 해줌

 

 

 

 

#2. The Basics of React

 

ReactJS 사전 준비

- Vanilla JS 에 대한 기본 이해 (중요!!)

 

- 우선은 브라우저를 이용해서 코딩할 것이므로 크롬과 같은 웹 브라우저

- vscode 같은 에디터

 

- vanilla.html 과 index.html 생성 => Vanilla JS 와 ReactJS 를 비교할 것임

 

 

Vanilla JS 를 이용한 구현

<!DOCTYPE html>
<html>
<body>
    <span>Total clicks : 0</span>
    <button id="btn">Click me</button>
</body>
<script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks : ${counter}`;
    }
    button.addEventListener("click", handleClick);
</script>
</html>

 

html body > span 과 button 생성

JS > btn 클릭에 따라 counter + 1 => span 에 반영

 

구현 순서

HTML 작성 - JS 작성 (getElement & innerText 수정)

-> Element 나 Event 가 많아질수록 코드가 더 길어짐

 

 

다음으로 ReactJS 로 들어가기 전에 알아둬야할 것은

지금부터 구현할 방식은 일반적으로 사용하는 방식이 아니다!!

 

ReactJS 의 동작 방식과 장점을 더 잘 이해하기 위해 복잡한 방식부터 시작하는 것이므로 주의할 것.

 

ReactJS 를 이용한 구현 - (1) Element 생성

React 는 script 태그를 이용해 사용

react) https://unpkg.com/react@17.0.2/umd/react.production.min.js
react-dom) https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

=> 매우 느리기 때문에 보통은 script 로 사용하지 않음!!!

 

 

<!DOCTYPE html>
<html>
<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"
    );
    const btn = React.createElement(
        "button",
        {onClick: () => console.log("button")},
        "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
</script>
</html>

 

html body > 오직 하나의 태그 <div id="root"></div> 만 생성

react > root id 에 들어갈 Element 들을 생성해서 render

1. getElementById 로 root 를 찾음

2. createElement 로 h3 와 btn 생성해서 container 로 묶어줌

3. ReactDOM 으로 container 를 root 에 render

 

React.createElement

규칙

const h3 = React.createElement("h3");

 

변수의 이름은 html 태그의 이름과 달라도 됨

=> const elem = React.createElement("h3"); ⭕

 

createElement() 의 값은 html 태그의 이름과 같아야 함

=> const h3 = React.createElement("elem"); ❌❌❌

 

구성

React.createElement(a, b, c)

 

a : HTML 태그 이름

b : property      ex) id, style, ... or null

c : content (내용)

 

<예시>

const span = React.createElement(
	"span",
	{id: "sexy-span"},
	"Hello"
);

 

content 가 여러 개일 때는 배열 이용 => [ ]

const container = React.createElement("div", null, [h3, btn]);

 

property 에 eventListener 등록 가능 => onClick, onMouseEnter, ...

const h3 = React.createElement(
	"h3",
	{onMouseEnter: () => console.log("mouse enter")},
	"Hello"
);

 

ReactJS 와 React-dom 의 역할

reactJS = 엔진 -> interactive 한 UI 를 만들 수 있게 함

react-dom = Element 를 HTML body 에 넣는 역할

render = Element 를 HTML 로 만들어서 배치하고 사용자에게 보여준다

 

구현 순서

JS 로 시작해서 HTML 로 끝 (Element 를 update 하고 HTML 에 보여줌)

-> 유저에게 보여질 내용을 컨트롤

 

 

ReactJS 를 이용한 구현 - (2) JSX 이용

babel 추가

babel) https://unpkg.com/@babel/standalone/babel.min.js

 

 

<!DOCTYPE html>
<html>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => (<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>Hello</h3>);
    const Button = () => (<button onClick={() => console.log("button")}>Click me</button>);
    const Container = () => (<div><Title/> <Button/></div>);
    ReactDOM.render(<Container/>, root);
</script>
</html>

 

1. script type 추가 => <script type="text/babel">

2. Title, Button 함수를 만들어 Container 에서 div 로 묶어주고 root 에  render

 

JSX

<button onClick={() => console.log("button")}>Click me</button>

 

JSX 를 이용하면 HTML 처럼 사용할 수 있음

property 로 event Listener 사용 가능     ex) onClick

 

- 하나의 태그로 감싸져 있어야 한다     ex) <div><Title/><Button/></div> 처럼 div 하나의 태그로 감싸기

- 자바스크립트 값을 사용하려면 { } 이용

- 주석 : { /* ~~ */ } 형태로 사용

 

Babel : JSX 를 브라우저가 이해할 수 있는 형태로 바꿔줌

 

컴포넌트

- 대문자로 시작 (소문자는 일반 HTML 태그)

- 함수의 형태 (화살표 함수 == 일반 함수 & return ( ))

 

화살표 함수

const Button = () => (<button onClick={() => console.log("button")}>Click me</button>);

 

일반 함수

function Button() {
	return (
		<button onClick={() => console.log("button")}>Click me</button>
	);
}

- return ( ) 필수

 

 

ReactJS 를 이용한 구현 - (3) counter 변수 적용

<!DOCTYPE html>
<html>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUP() {
        counter = counter + 1;
        render();
    }
    function render() {
        ReactDOM.render(<Container/>, root);
    }
    const Container = () => (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUP}>Click me</button>
        </div>
    );
    render();
</script>
</html>

 

1. counter 변수 선언

2. Container 내에 h3 와 button 만들기

3. button 을 클릭할 때마다 counter + 1 을 하는 countUP 함수 생성

4. counter 가 증가할 때마다 리렌더링 되어야 하므로 render 함수 따로 생성

 

Vanilla JS 와 ReactJS 의 렌더링 비교

- Vanilla JS : counter 를 포함하고 있는 태그 전체가 update

- ReactJS : counter 숫자만 update -> 바뀐 부분만 업데이트 된다.

 

 

 

 

Vanilla JS 와 비교하니 ReactJS 의 장점이 더 잘 보였다.

더 간단하고 직관적으로 표현할 수 있다는 게 좋은 듯!!

 

그리고 아주아주 어려운 방식 (React.createElement..) 부터 시작하니

확실히 React 의 동작 방식을 더 잘 이해할 수 있었다.

 

지금까지는 render 가 매끄럽지 않기 때문에...

#3 에서 State 를 사용하며 render( ) 부분을 고쳐줄 것이다.

 

 

'FrontEnd > React' 카테고리의 다른 글

[ReactJS] Effect - ReactJS 로 영화 웹 서비스 만들기 (6)  (0) 2021.12.02
[ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5)  (0) 2021.11.26
[ReactJS] Props - ReactJS 로 영화 웹 서비스 만들기 (4)  (0) 2021.11.26
[ReactJS] Unit Converter 완성 - ReactJS 로 영화 웹 서비스 만들기 (3)  (0) 2021.11.25
[ReactJS] State - ReactJS 로 영화 웹 서비스 만들기 (2)  (0) 2021.11.25

관련글

댓글

티스토리툴바