React란?

리액트란?

'컴포넌트' 기반의 프론트엔드 라이브러리이다. (Component의 이름은 항상 대문자로 시작)

JSX라는 문법을 사용한다.

Virtual DOM사용 (가상돔)

 

JSX문법이란?

(자바스크립트 안에서 HTML문법을 사용하여 View를 구성 할 수 있게 도와주는 자바스크립트 문법)

return시 하나의 DOM만 리턴함. (이때 의미없는 div의 남용을 보완하여 Fragment가 나옴.) <></>

If문 사용 불가. (삼항연산자로 대체하여 사용 가능)

 

가상돔이란?

(브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. )

 

>벨로퍼트님의 모던 리액트를 보며 공부하다 참고함.

 

리액트로 프로젝트 만들어보자!

1. VS Code에서 터미널 열기

2. npm install -g create-react-app

3. create-react-app 프로젝트명 (여기서 프로젝트 명은 소문자만 가능하다. 대문자 불가)

4. cd 프로젝트명

5. npm start