[React] 개요

 

 

 

리액트 시작 전 준비사항

 

node.js

자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경

 

npm(node package manager)

node.js를 위한 패키지 매니저(버전, 의존성 관리 및 편하게 삭제할 수 있도록 도와주는 역할)

 

터미널로 잘 설치되었는지 확인

---

React란?

A JavaScript library for building user interfaces

*라이브러리: 자주 사용되는 기능들을 모아서 정리해둔 모음집(문자열 관련 기능, 숫자 관련 기능, ...)

 

=> UI 라이브러리이다.

 

프레임워크 vs. 라이브러리

React	Vue
라이브러리(도구)	프레임워크(메뉴얼)
개발자가 필요한 부분만 찾아서 사용	흐름 제어 권한을 프레임워크가 가짐

---

리액트의 장점

- 빠른 업데이트와 랜더링 속도

* Virtual DOM 이용

   DOM은 웹 페이지를 정의하는 하나의 객체(웹 사이트의 정보를 모두 담고 있는 그릇)

   웹사이트 업데이트는 곧 DOM을 수정함을 의미 -> 리액트는 최소한의 수정 부분을 찾아서(Compute Diff) -> 변경된 내용만 보여줌

 

- Component-Based

  레고 블록 조립하듯 컴포넌트들을 모아서 개발

  리액트로 만든 웹은 수많은 컴포넌트들의 조합으로 구성됨

 

- 재사용성(Reusability)

  모듈의 의존성을 낮추고 호환성을 높여서 개발 기간을 단축시키고, 유지 보수를 용이하게 함

---

웹사이트에 리액트 추가하기

웹사이트에 React 추가 – React

 

---

create-react-app (CRA)

npx create-react-app 프로젝트이름