React 오리엔테이션

1. React?

- 사용자 인터페이스를 만들기 위한 JS 라이브러리

- 인터렉션이 많은 웹 앱을 개발하기 위해 사용

2. 프레임워크 VS 라이브러리?

1) 프레임워크

- 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음

- 프레임워크안에 다양한 라이브러리들이 모듈화되어 모여있다가 어떠한 기능을 구현하기 위해서 라이브러리 호출함

2) 라이브러리

- 어떠한 특정 기능을 모듈화 해놓은 것

- 전적으로 UI를 렌더링 하는데 관여

- Model, Controler, View 중 View를 담당

 

2-1) 리액트 생태계

- react-router-dom모듈 -> 화면을 바꾸는 라우팅

- redux, mobx 등의 모듈 -> 상태 관리

- webpack, npm 등 -> 빌드

- Eslint, Mocha 등 -> 테스팅

3. 리액트를 사용하는 이유?

- 상대적으로 배우기가 쉽다.

- 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경이다.

- 많은 기업들의 사용으로 검증이 되었다.

 

4. 리액트 컴포넌트?

- 리액트는 여러 컴포넌트 조각으로 되어있음

--> 하나의 페이지를 리액트로 만든다면 여러개의 컴포넌트가 모여서 하나의 페이지를 이룸

 

4-1) 컴포넌트?

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용 가능함

- 컴포넌트를 동시에 수정하는 것도 가능함

 

4-2) 리액트 컴포넌트 두가지

4-2.1) 클래스형 컴포넌트(Class Component)

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

4-2.2) 함수형 컴포넌트(Functional Component): Hooks 발표 이후부터 클래스형보다 더 많이 이용

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

 

5. 리액트 설치 시 Node.js가 필요한 이유?

- 리액트 프로젝트를 만들기 위해서 Node.js와 npm의 설치 필요

--> Node.js를 받을 때 Npm도 같이 설치 됨

- 리액트 프로젝트를 개발하는 데 사용되는 주요 도구들(바벨, 웹팩)이 Node.js를 사용

 

5-1) Node.js?

- 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임

- 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 가능