React 개요

리액트는 여러개의 컴포넌트로 구성되어있다. 

리액트의 컴포넌트는 두가지가 있다. 

1. 클래스형 컴포넌트 (Class Components)

class App extends Component {
	render() {
    	return <h1>안녕하세요.</h1>
    }
}

2. 함수형 컴포넌트 (Functional Components) - 리액트 Hooks이 나온이후 함수형 컴포넌트를 사용해서 개발을 많이 한다. 

function App() {
	return <h1>안녕하세요.</h1>
}

 

# 리액트 실행전

node js, npm(node js가 설치될때 같이 설치된다.)을 설치해야한다. 

 

 

리액트는 가상돔을 사용한다. CRP(critical render path)과정을 이용해서 브라우저에 뿌려주게된다. 

DOM tree 생성 -> Render tree생성(브라우저가 DOM과 CSSOM을 결합한다. 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다. ) -> Layout(reflow) -> Paint

 

리액트 앱 설치하는 방법

npx create-react-app <폴더이름> 명령어를 적으면 쉽게 설치할 수 있다. 

 

# 웹팩

오픈 소스 자바스크립트 모듈 번들러로 여러 개로 나눠져있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

 

# 바벨 

최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있게해주는 라이브러리이다.

 

# 실행순서 

리액트 앱을 만들 폴더 생성 -> 터미널 실행 -> npx create-create-app ./

 

생성시 아래와 같은 폴더와 파일이 생성된다. 

my-app/
	README.md
    node_modules/
    package.json
    public/
    	index.html
        favicon.ico
    src/
    	App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

public/index.html은 페이지 템플릿이고 (public폴더 내부의 파일만 사용가능하다.)

src/index.js는 자바스크립트 시작점으로서 파일명을 수정하면 안된다. 

package.json에 만들고자하는 프로젝트의 정보들이 적혀있다. 

(dependency나 앱 실행, 빌드, 테스트 등을 할 스크립트를 적어놓을수 있다. (npm 명령어로 실행가능)

스크립트에 start라고 적어줘서 npm run start라고 명령어를 입력해주면 리액트 앱을 실행할 수 있다. 

 

# tabnine ai는 코드를 치다보면 다음으로 칠껄 미리 추천해주는 확장프로그램이다. 

# Eslint 틀린문법을 알려준다. 

 

 

리액트에도 다양한 라이브러리가 있다. 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하고, 상태 관리를 위해서 redux, mobx 등 여러 모듈을 사용하고. 빌드를 위해서는 webpack, npm 등, 테스팅을 위해서도 Eslint, Mocha 등을 이용해서 리액트는 프레임워크가 아니라 라이브러리이다.