[React] React(리액트) 개요, MVC 패턴, 특징, 준비자료

1) React(리액트)란?

- 페이스북사에서 만든 자바스크립트 라이브러리이다.

- 페이스북에서 자체적으로 사용하기 위해 만들었고, 많은 웹 어플리케이션에 적용하고 있다.

- 유저 인터페이스를 만드는 라이브러리이다.

- View 레이어를 담당한다.

- vue.js, angular.js 와 유사하다.

- React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(PC 어플리케이션)

 

 

2) M(Model) V(View) C(Controller) 패턴

Model : Data

View : UI

Controller : logic

 

 

3) 리액트의 특징

- 컴퍼넌트로 이루어진 UI 라이브러리

- 컴퍼넌트는 한 가지의 기능을 수행하는 UI 단위를 말한다.

- 리액트 어플리케이션은 꼭 하나 이상의 컴퍼넌트로 이루어져 있다.

- 최상위 컴퍼넌트는 Root 이다.

- virtual DOM tree 를 가지고 있다.

 

 

4) 컴퍼넌트 내 주요 키워드

 

1. state

- 데이터의 상태를 나타내는 객체

 

2. render

- 사용자에게 어떻게 표시될 것인지 나타내는 함수

 

✔ state 객체의 값이 변경되면 render 함수가 자동으로 호출되면서

변경된 state 값이 화면에 나타낼 수 있도록 render 함수가 계속 반복적으로 호출된다.

 

import React from 'react'

class LikeButton extends Component {
  	state = {
    	numberOfLikes: 0,
  	};

	render() {
	return <button>
  			{this.state.numberOfLikes}
  		<button>;
  	}
}
export default LikeButton;

 

 

5) 리액트를 사용하기 위해 준비할 것들

 

리액트 공식 사이트 주소

https://reactjs.org/docs/getting-started.html

Getting Started – React

 

리액트를 위한 툴

1. 터미널

- cmder https://cmder.net/

Cmder | Console Emulator

 

2. 노드

- 자바스크립트를 실행할 수 있는 환경

- https://nodejs.org/ko/

Node.js

 

3. 브라우저(크롬)

- React Developer Tools

- https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko 

React Developer Tools

 

4. 비주얼 스튜디오 코드

- Reactjs code snippets

- vs code 에서 다운로드 받기