210302 WECODE #14-1 React 기본 개념

1.why React?

1-1. Web Application의 발전

1세대) HTML/CSS, JS, DOM, Event
2세대) jQuery(Method 모음)
3세대) Angular, Vue, React

1-2. React란?

• "지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는것"을 목표로 2013년 Facebook에서 개발한 Library.
• MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다.
• 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다.
• 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있다.

2. What is React?

2-1. React 정의

• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
• 리액트와 같은 프론트엔드 Library 혹은 Framework를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점
• 리액트는 가상돔(Virtual DOM)을 통해 UI를 빠르게 업데이트
• 가상돔이란? 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소집합을 계산하는 기술
• 이 기술 덕분에 불필요한 UI업데이트는 줄고, 성능은 좋아진다.

3. Settings

3-1. Node.js

• 자바스크립트가 브라우저 밖에서도 (ex. 서버) 동작하게 하는 환경
• 자바스크립트의 "탈 웹"
• 프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js기반(ex. CRA, Babel, Webpack)

3-1. npm

• Node Package Manager 관!리!도!구!
• Node.js 설치 시 npm 자동으로 설치
• Node 기반의 패키지를 사용하려면 npm이라는 패키지 관리 도구가 필요
• npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.

3-2. CRA

• Create-React-App
• 리액트 프로젝트를 시작하는데 필요한 "개발 환경을 세팅"해준다.
• 리액트는 UI기능만 제공. 따라서 개발자가 직접 구축해야하는 것들이 많다.
• CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공
• CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능

4. CRA - Settings

• Node.js & npm

• Settings

  1) node-modules - package.json - .gitignore

  2) index.html - index.js - App.js

4-1. CRA 설치

• westa-react 프로젝트 설치 : npx create-react-app westa-react
• westa-react 프로젝트 진입 : cd westa-react
• 로컬 서버 띄우기 : npm start

4-2. CRA 기본 폴더 및 파일 구성(1)

1) node.modules

• CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
• 실제 패키지 소스 코드

2) package.json

• CRA 기본 패키지 외 추가 라이브러리/패키지
• { 이름 : 버전정보 }
• 여기에 추가 패키지를 다운받고 git에 올려주면 공유가 가능하다(npm install)

3) .gitignore

• github에 올리고 싶지 않은 폴더와 파일을 작성
• 팀 프로젝트시 node.modules에 사용한다!
  

4-3. CRA 기본 폴더 및 파일 구성(2)

1) index.html

• <div id="root"></div>

2) index.js

• ReactDOM.render(<App />, document.getElementById("root"))
• ReactDOM.render함수의 인자는 두 개
• (보여주려는 컴포넌트, 컴포넌트의 위치)

3) App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
  
• .CSS는 해당 .JS에 연결한다

5. JSX

5-1. JSX 정의

• JavaScript Syntax Extention
• 리액트에서 사용하는 자바스크립트 확장 문법
• JSX로 작성한 코드는 브라우저가 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

5-2. JSX 장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙
• HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작이 가능하다! ( DOM에 접근하지 않고 직접 구현 가능!)

마치며) React의 장점

• Java Script는 동적 변화를 위해 일일히 해당하는 DOM객체에 접근해서 구현해야 하지만
• React는 DOM객체에 접근하지 않아도 바로 구현이 가능하다!! (State & Props)