React 기본 - 1.리액트란?

React란?

웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 사용합니다.
facebook에서 제공하는 라이브러리이며, 현재 많이 활용되고 있는 인기있는 라이브러리 입니다.

React의 특징

1. Data flow

2. Component 기반의 구조

3. Virtual Dom

4. Props & State

5. JSX

React의 특징-1. Data flow
데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가지며, 데이터 바인딩 규모가 커지면 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있습니다.

 

React의 특징-2. Component 기반의 구조
UI를 여러 컴포넌트를 쪼개서 만들어 한 페이지 내에서도 여러 부분의 독립된 컴포넌트를 만들어서, 재사용을 해

유지보수 및 관리가 용이해지는 장점을 가집니다.

 

React의 특징-3. Virtual Dom
Dom은 html, xml,css 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리합니다.
이벤트가 발생할 때마다  Virtual Dom을 만들고 다시 그릴때 실제 Dom과 비교하고 전후 상태를 비교하고 최소한의 변경사항만 실제 Dom에 반영해, 효율성과 속도를 개선합니다.

 

React의 특징-4. Props & State

- Props란 부모 컴포넌트에서 자식 컴포넌트를 전달해 주는 데이터를 말하며, 자식 컴포넌트에서 전달받은 props는

변경이 불가능 하고 props를 전달해준 최상위 부모 컴포넌트만 porps를 변경할 수 있습니다.

 

- 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있으며, 동적인 데이터를 사용할때 다룹니다.
각각의 State는 독립적입니다.

 

React의 특징-5. JSX

JSX는 자바스크립트를 확장한 문법이며, 리액트에서 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결됩니다.