[React] React 란?

1️⃣ 리액트란?

→  리액트 : 자바스크립트 라이브러리

- 페이스북(Facebook) 주도로 개발되었다

- SPA(Single Page Application) 개발이 편리하다

 

2️⃣ 리액트 사용 이유

Q. 리액트 왜쓰나요?

→ 요소(element) 재사용하기 위해 사용

 

Q. 어떻게 재사용 하나요?

→ 컴포넌트 만들어 재활용

 

Q. 컴포넌트가 뭔가요?

→ 리액트 엘리먼트를 반환하는 것

 

Q. 리액트 엘리먼트는 뭔가요?

→ 불변인 순수 자바스크립트 객체

 

3️⃣리액트의 특징

- UI 요소 중 자주 사용되는 부분을 컴포넌트(Component)화 하여 재활용성을 높여준다

- 가상 돔 (Virtual DOM) 을 제공하여 효율적인 DOM 관리와 화면 처리를 지원한다

• 기존 DOM 은 요소가 변경될 때마다 렌더링 과정이 실행되는 문제가 있다
• 가상돔은 메모리에 DOM 구조를 만들고, 요소 변경이 발생되면 가상돔을 변경
• 가상돔 변경을 모아 한꺼번에 DOM 에 적용하여 렌더링 부하를 줄이고 성능을 향상시킨다

- JSX(Javascript XML) 를 이용하여 DOM Tree를 생성한다

- 모델(Model) 과 뷰(View) 사이에 단방향 데이터 바인딩(one-way data binding)을 제공한다

 

4️⃣리액트 개발 환경

리액트는 라이브러리 → 다양한 프로그램을 이용하여 개발환경을 구축해야한다

 

[주요 프로그램]

◎ node.js

◎ 바벨(Babel)

◎ 웹팩(Webpack)

◎ Visual Studio Code