React Document 1 : React란?

 

🐥React란?

React는 facebook에서 제공해주는 자바스크립트 라이브러리로 UI를 만드는 데 사용한다. 보통 웹과 앱을 만들려면 3가지 개발이(UI, UI 제어 로직, 데이터를 처리하는 비지니스 로직) 필요하다. HTML, CSS, Javascript 만으로도 UI를 만들 수 있지만 React로 사용자와 상호작용하는 동적인 UI를 만들기 편리하다.

 

• Data Flow
  React의 데이터 흐름은 한 방향으로만 흐름
  
  
• Component
  React는 한 페이지의 각 부분을 독립된 Component로 만들고 여러 개의 Component를 합쳐 한 페이지를 구성한다. UI를 Component 단위로 구성하면 코드 이해도, 재사용성이 좋다
  
  
• Virtual DOM
  React는 가상의 DOM을 만들어 실제 DOM과 비교해서 최소한의 변경사항만 실제 DOM에 반영해서 어플리케이션의 효율성과 속도를 개선한다
  
  
• Props and State
  Props는 부모 Component에서 자식 Component로 전달하는 데이터로 변경 불가한 읽기 전용 데이터이다. State는 클래스형 Component 내부에서 선언하며 변경 가능하고 동적 데이터를 다룬다
  
  
• JSX
  JavaScript를 확장한 문법으로 공식적인 JavaScript 문법이 아니지만  'Babel'을 통해 JSX를 사용할 수 있다. JSX는 React랑 함께 쓰는 것을 권장하며 JSX는 React의 Element를 생성해서 기존의 React.createElement 함수보다 더 편하게 UI를 구성할 수 있다.
  
  
• Declarative
  선언형 프로그래밍은 프로그래밍 패러다임의 한 종류로 What에 집중하여 결과만 기술하고 How는 기술하지 않고 (의도에 집중하는) 방법이다. (How에 집중하여 수행할 명령 및 알고리즘을 명시하고 목표는 명시하지 않는 명령형 프로그래밍과 반대) React는 JSX를 사용하여 명령형 프로그래밍을 선언형 프로그래밍으로 만들어준다. 선언형 뷰는 코드가 예측 가능하고 디버그하기 쉽고 상호작용이 많은 UI를 만들 때 어려움을 줄여준다.

 

 

🐥 혹시 node.js이랑 npm 잘 모르면 보고 아니면 밑으로 가자

---

node.js

Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임으로 다양한 자바스크립트 어플리케이션 실행할 수 있다

• Non-Blocking I/O
• 단일 스레드 이벤트 루프
• 내장 HTTP 서버 라이브러리 포함
• 웹 브라우저에서 독립되어 웹 브라우저를

JavaScript는 스크립트 언어로 특정 프로그램 안에서 실행할 수 있는데 과거에는 브라우저에서 JavaScript를 실행할 수 있었다면 지금은 Node.js를 설치하면 브라우저 없이 터미널에서 JavaScript를 실행할 수 있다.

---

---

npm (Node Package Manager)

node.js에서 사용할 수 있는 모듈을 패키지화에서 설치, 관리를 수행한다

npm install [패키지명]
npm install -g [패키지명]

위 명령어로 패키지를 설치할 수 있고, 해당 프로젝트에서만 사용할 수 있는 local install과 모든 프로젝트에서 공용으로 사용할 수 있는 global install이 있다. (local install이 기본으로 설정되어 있다)

npm에서는 package.json 파일에 사용하고 있는 패키지의 명세, 프로젝트 정보 등이 기록하여 패키지들의 의존성을 관리한다.

---

 

 

 

🐥 React 해보자

Visual Studio Code(IDE)를 이용해서 React App 코드를 작성하자 (코드 작성은 다른 곳에서 해도 된다)

javascript 런타임인 node.js가 React App을 실행시켜준다

npm으로 react, react-dom, create-react-app 등 React App에 필요한 패키지를 설치한다

 

 

 

 

🐥 React App 생성

(1) 원하는 폴더에서 cmd를 열어서 수행하거나

(2) Visual Studio Code에서 원하는 폴더를 열고 [view-terminal]에서 수행하면 된다

 

npm으로 create-react-app 설치 한다. create-react-app은 React App을 만들어주는 패키지이다

npm install create-react-app

 

create-react-app이용해서 원하는 이름의 React App을 생성한다 (단 이름은 소문자로 적어야한다)

create-react-app [프로젝트명]

 

오른쪽은 내가 원하는 폴더에 node_modules, React App, package-lock.json이 생성된 것을 볼 수 있고

왼쪽은 Visual Studio Code에서 원하는 폴더를 열고 생성된 React 프로젝트를 자세히 열어보았다

 

 

🐥 React App 실행

React App 프로젝트 폴더 안에서 다음 명령어를 입력해야 한다

npm start

 

React App을 실행시킨 후 브라우저에서 접속해본다

localhost:3000