1. 리액트(React.js)

자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

• 페이스북에서 제공해주는 프론트앤드 라이브러리
• 사용자가 조작하기 위한 UI를 만들도록 도와줌
• SPA(Single Page Application), 모바일 어플리케이션 개발 시 사용
  *SPA: 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것. 상호작용하기 위한 최소한의 요소만 변경이 일어난다.

2. 리액트 특징

1. 컴포넌트(Component) 기반 구조

• 컴포넌트 기반 구조를 이용함으로써, 어느 한 부분에 오류가 나면 그 부분의 컴포넌트만 수정하면 됨으로 유지보수, 관리, 재사용이 용이

2. Data Flow

• 데이터 흐름이 한 방향(부모 -> 자식)으로 흐르는 단방향 데이터

3. JSX(JavaScript eXtension)

• 자바스크립트의 확장 문법
• 리액트에서 HTML 표현할 때, JSX를 사용
  -HTML요소에 class값 정의할 때, class 대신 className 이라는 단어 사용
  -이벤트를 핸들링하는 onClick 등의 단어들은 카멜 표기법으로 표기해야 함 등의 특징을 가지고 있음

4. Virtual DOM

• DOM(Document Object Model)은 html, css 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리
• Virtual DOM은 가상의 DOM으로, 변경된 부분만 DOM을 반영하는 방식으로 작업하여 효율성과 속도를 높임

5. Props and State

• props : 부모 컴포넌트 -> 자식 컴포넌트 로 전달해주는 데이터
  자식 컴포넌트에서 전달받은 props 변경 불가능
  props를 전달해 준 최상위 부모 컴포넌트만 props 변경 가능

• state : 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능
  사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용
  클래스형 컴포넌트에서만 사용이 가능, 각각의 stat는 독립적

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

1. 사용지와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다.
2. 컴포넌트(Component) 단 하나로 관리한다.
3. 간편한 UI 수정과 재사용이 용이하다.
4. 다른 프레임워크나 라이브러리를 혼용하여 사용이 가능하다.
   즉, 개발 완료된 서비스에도 적응이 가능하다.
5. 새로고침을 누르지 않아도 자동으로 반영된다.