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

4700 단어 ReactDOM코딩JSXhtmlReactJavaScript

사이트 : 노마드코더
강의 : 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/[email protected]/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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 부분으로 전달해 줌
Kafka acl SASL/PALIN 인증 설정을 해보자!
Credentials

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage