Day 1 - ReactJS로 영화 웹 서비스 만들기

Zvezda89·2022년 4월 18일
0

사이트 : 노마드코더
강의 : ReactJS로 영화 웹 서비스 만들기
시각 : 2022.04.17


◆ 완료한 강의 :

  • #1 [2021 UPDATE] INTRODUCTION
  • #2 [2021 UPDATE] THE BASICS OF REACT

1. React?

node.js가 설치되어 있어야 함.
Visual Studio 내 터미널에서 명령어를 통해 react 설치.

React

페이스북이 만든 오픈형 library.
Jquery처럼 작성을 더 쉽고 편안하게 도와줌
html에 아무것도 건들지 않고, html, css, javascript 등 생성을 한번에 가능
페이지를 다시 로드하지 않고도 데이터를 변경할 수 있게 가상 돔을 이용,
변경되는 부분만 수정해서 보여주고 모든 작업이 끝나면
일괄로 합쳐서 실제 돔에 반영시켜 줌.

React DOM

html을 열게되면 'DOM'이란 것을 만들게 됨.
변경요소가 생기면 전체 DOM을 새롭게 만듬.
React는 변경사항만 업데이트 되는 '가상 DOM'을 만들어 진짜 DOM과 비교. 모든 업데이트가 끝나면변경된 부분만 진짜 DOM에 반영함.

JSX

Java Script eXtension. (자바스크립트 확장 문법)
자바스크립트에서 HTML을 작성하듯, 비슷하게 작성토록 해줌
script type="text/babel"이라고 정의해주고 그 안에 작성해야 함.
BABEL이 JSX를 일반 자바스크립트 형태로 번역해서 HTML에 전달해줌
React.createElement('부모태그', 속성 등등, '자식태그')는 그닥 좋은 방법이 아님. 이거대신 JSX형태로 쓰는 편이 좋음.


작성 문서에 직접 React, ReactDOM, Babel을 활성화하는 법

  <body>
    <div id="root"></div>
  </body>
//보통 HTML의 Body에 'root'란 id의 'div'를 하나 생성해놓고 시작.
JSX는 감싸는 부모태그가 하나 있어야 하기 때문임.

<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">이 안에 작성 </script>
  // JSX를 번역해서 일반 JS형태로 HTML의 HEAD 부분으로 전달해 줌
profile
Come As You Are

0개의 댓글