[React] React 개요 및 설치, 기본 동작

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

프레임워크는 내가 개발할 때 환경에 종속되어 개발하는 경우를 말함

라이브러리는 내가 개발하는 언어에 추가로 파일을 연결하여 개발하는 경우를 말함

즉, 프레임워크는 미리 만들어진 틀 안에서 그 제한된 환경 안에서 사용하는 것이고 라이브러리는 원래 있는 환경에서 미리 만들어진 것을 가져와서 쓰는 것이다.

 

1. React(리액트)

- 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리

- React는 웹 브라우저의 UI를 구현하는 라이브러리로 기본적으로 CSS, HTML, JavaScript 개발언어를 이용한 컴포넌트 기반 프론트엔드 라이브러리이다.

- React는 state가 변경되면 그 컴포넌트 만 리렌더링이 되기 때문에 유지보수가 편하고, 통신도 적게 들고, 웹 사이트 개발이 더 편하고 빠르다.

• 개요
  - 2013년 페이스북 소프트웨어 엔지니어 Jordan Walke에 의해 탄생
  - React 컴포넌트 작성을 손 쉽게 하는 XML 구문이 바로 JSX이다. .jsx or .js 사용
  - 컴포넌트에 속성(Props)을 전달하고 상태(State)를 관리하여 화면을 표현
  - 2015년 CS6 class 지원
  - 2017년 React v16.0 업데이트
  - 2019년 React Hooks 공개
• 특징
  - 선언된 프로그래밍
  - 컴포넌트 기반 프로그래밍
  - 컴포넌트의 확장성/재사용성이 높음

2. React 설치

- React를 설치하기 위해서는 먼저 node.js 라는 것을 설치하고 그 기반 위에서 설치를 해야 한다.

• 설치 사전 준비
  - node.js 설치 및 버전 확인 : node -v(현재 기준 16.x.x 버전 이상 사용 권장)
  - node 다운로드 : https://nodejs.org/ko/

  Node.js

• 리액트를 설치할 폴더로 이동
  - cmd 또는 터미널에서 cd d: ... / cd c: ...
• 리액트 설치 시작
  - 먼저 npm -v (패키지 관리)로 npm이 설치되어 있는 지 확인
  - 확장된 패키지 관리를 사용하고 싶으면 npm install npx -g 를 먼저 실행
  - 그 후 npx -v (확장된 패키지 관리)로 npx가 잘 설치되어 있는 지 확인
  - 그 후 리액트 설치 시작 npx create-react-app ./ (현재 폴더)
• 리액트 실행
  - VSCode 터미널에서 React가 설치된 폴더에서 npm run start 실행
  - Complied successfully!이 출력되면서 브라우저 켜짐

3. 기본 동작

- 리액트를 설치하면 위처럼 구성되어 있다.

- 시작을 하면 index.js부터 시작을 하게 되어있다.

index.html

index.js(왼쪽) App.js(오른쪽)

- index.js로 가면 root라는 DOM을 가져와서 render 함수를 시작하게 되어있다.

- render는 화면에 그리기 위해 DOM을 반환하는 메소드이다.

- id가 root인 DOM은 index.html에서 가져오는 것이며 <App />은 App.js에서 정의되어 있는 컴포넌트를 가져와서 사용하는 것이다.

- 즉, id가 root인 돔에 <App />을 통해서 App.js에 정의되어 있는 HTML 태그를 반환해서 화면에 그리는 것이다.