React 기초

˙React Basics

 React는 Facebook에서 제공하는 Web View를 개발할 수 있도록 지원하는 라이브러리로, Component 기반으로 되어 있어서 데이터를 내려주면 개발자가 자유자재로 UI를 구현할 수 있고, 사용자(Client)와 상호작용 할 수 있는 UI 화면을 효율적으로 구성할 수 있다.

 

˙React Component

 React는 Component를 기반으로 하는 라이브러리로, 데이터를 처리하는 역할을 담당한다. User-Interface 안에서 각각의 Component들이 구성되어 동작되고, Component들은 다른 User-Interface에서도 사용이 가능(재사용성 및 효율성 극대화)하다. Component는 클래스형(stateful)과 함수형(stateless)으로 구성된다.

 

˙React Flow

 React는 데이터(처리과정)의 흐름이 단방향이다. 데이터(처리과정 또는 처리)가 아래로 내려가는 형식으로, 상위(부모)의 데이터(처리과정)를 변경하기 위해서는 state 변수를 사용한다.

 

˙React State

 동적인 데이터를 처리할 때 사용한다. 사용자와의 상호작용(사용자의 데이터 제어)을 통하여 데이터를 동적으로 변경할 때 사용하고, 클래스형 Component에서만 사용 가능한데, 각각의 state는 독립적인 형태로 다른 Component에 직접적인 접근은 불가하다. 대신에, 상위(부모)의 state는 변경이 가능한데, 함수를 props로 받는다면 변경 가능하다.

 

˙React Props

 상위(부모)에 해당하는 Component에서 하위(자식) Component로 전달해 주는 데이터를 처리할 때 사용한다. props는 읽기 전용(Read Only) 데이터와 유사하다. 하위(자식) Component에서 전달받은 props에 대해서는 변경이 불가능하고, props를 전달해준 최상위(부모) Component만 props에 대해서만 변경이 가능하다.

 

˙React Virtual DOM

 ▷ Virtual DOM : Virtual Document Object Model

   HTML 코드를 구현하고, Web에서 열게 되면 HTML 코드들이 DOM을 생성한다. 하지만, HTML 중 변경되는 부분이 있다면 전체 DOM을 새로고침 하게 된다. React에서는 변경된 부분에 대해서만 DOM을 새로고침 하고,이러한 동작으로 인하여, React에서는 HTML보다 Application의 증가된 효율성을 기대할 수 있다.