React JS_Introduction

#0.0 ~ #2.0

아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

0. 사전 작업

node.js/ npm/ npx/ git 을 다운받아야 한다. 

cmd 창에서 node -v/ npm -v/ npx -v/ git --version 각 명령어로 설치 여부를 확인하고, 없으면 다운받아야 한다.

npx 다운로드 방법: npm install npx -g

 

react-create-app 이라는 것을 이용해 쉽게 리액트를 사용할 수 있다.

리액트 어플리케이션은 다음 명령어로 생성할 수 있다.

npx create-react-app <app_name>

 

1. React?

리액트는 component라는 개념에 집중되어있는 프론트앤드 라이브러리이다. 리액트를 이해하기 위해 component라는 개념이 필요하다. 이는 다음 포스팅에서 집중적으로 다룰것이며, 우선은 '리액트는 component와 함께 동작하며 모든 것은 component로 이루어져 있다'정도로 알고 넘어가자. 

 

 

2. React 동작 방식

리액트는 virtual DOM에서 동작한다. 실제로 DOM을 관리하는 것이 아니라, 가상 환경(virtual DOM을 통해)에서 관리한다. 소스코드에서 보는 것은 기본적으로 빈 index.js 파일이며, index.js 파일에서 App.js를 랜더링해서, 보이는 화면과 같이 만들어 주는 것이다. 소스코드에는 존재하지 않지만 리액트가 만들어서 보여준다. 이것이 바로 리액트를 빠르게 만들어 주는 이유이다.

 

리액트는 브라우저에서 보이는 소스코드에 처음부터 html을 넣지 않고, html에서 html을 추가하거나 제거한다. 어플리케이션이 처음 로드할 때는 빈 html을 로드하게 되고, 이후 리액트가 component에서 작성한 것을 html로 만들어 브라우저로 넣는다. 즉, 리액트는 component를 사용해서(가져와서) 브라우저가 이해할 수 있는 일반 HTML로 만든다. 

 

 

 

#Reference

https://www.youtube.com/watch?v=BYbgopx44vo