[React] React의 개념 및 특징에 대하여

개요

이번 블로그에서는 리액트가 무엇인지 간단하게 살펴보며, 리액트의 특징에 대해 살펴보고, 간단하게 설치하는 법을 알아 볼려고 합니다.

React란?

React는 UI를 만드는 Javascript의 라이브러리의 하나로써, 사용자 인터페이스를 만들기 위해 사용됩니다.

리액트는 Javascript의 프레임워크라고 생각을 하시는 분들이 있을 수도 있지만, 리액트는 엄연히 라이브러리로 정의 되고 있습니다.

주로 프론트앤드로 개발되는 기술은 React, Angular, Vue 가 대표적입니다. React와 Vue는 UI를 만들기 위해 모든 기능을 포함하지 않은 라이브러리 이고, Angluar는 모든 기능을 포함하고 있는 프레임 워크 라고 생각 하시면 됩니다.

다만 React가 라이브러리 라고 불리우고 있지만, 개발자들이 리액트에 필요한 여러 가지 기능들이 추가 되어있고, 사실상 프레임워크 에 가깝다고 말할 수 있습니다.

React의 특징

React는 3가지의 주요 특징을 지니고 있으며, 이러한 주요 특징때문에, React를 사용하는 큰 이유 중 하나입니다.

1. 컴포넌트 (Component)

컴포넌트는 화면(UI)를 구성하는 최소한의 크기의 개별 단위입니다. 이러한 작은 요소의 Component를 쌓아 올리면 하나의 UI가 만들어 집니다. 이러한 작은 Component 들로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 수월 합니다.
또한, Component는 재사용을 할 수 있으며, 재사용을 통해 개발 생산성을 향상 시킬수 있으며, 유지보수에 있어 상당한 편의성을 줍니다.

2. 단방향 데이터 흐름

React는 다른 MVC 구조와 다르게 One-way Data Flow(단방향 데이터 흐름)을 지향 합니다. 단방향 데이터 흐름은 양방향보다 데이터를 감지하는데 부담이 적고, 단순한 데이터 흐름으로 이해하기 쉬운 어플리케이션을 만들 수 있습니다.
보통 props라 불리는 속성들은 부모 컴포넌트로 부터 전달이 됩니다. 부모 컴포넌트로 부터 전달된 props 값을 변경하기 위해서는 state를 이용해야 합니다.

• props
• props* 란 부모 Component로 부터 자식 Component로 전달해 주는 데이터를 말합니다.
  자식 Component에서 전달 받은 props를 변경이 불가능하며, props를 전달해준 최상위 부모 Component에서 props를 변경할 수 있습니다.
• state
• state*는 동적인 데이터를 다룰 때 사용합니다.
  사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용합니다.
  각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근을 불가능 합니다. 하지만 자신보다 상위에 있는 state는 변경이 가능한데 state를 변경해주는 함수를 props로 받는다면 변경이 가능합니다.

3. Virtual DOM (가상 DOM)

Virtual DOM은 가상의 Document Object Model를 말합니다.
DOM은 HTML 내에 원하는 위치에 접근하기 위한 하나의 방식으로 W3C 표준입니다.
기존방식의 DOM은 객체의 변화를 감지하면 DOM을 다시 그리는 방식으로 특정 한부분이 변경하게 되어도 다시 그리게 됩니다.
DOM을 다시 그리게 되면 브라우저의 리소스를 사용하기 때문에 비효율 적이며, 이러한 문제점 들은 React에서 해결이 됩니다.
가상 DOM은 HTML DOM을 추상화 하여 실제 DOM과 비교하고, 변환된 부분만 업데이트 하는 방식으로 작업을 수행하여, 효율성을 올릴 수 있는 장점이 있습니다.