/ REACT

React란?

React은 다음과 같이 구성되어 있습니다.

1. React

React는 Facebook에서 제공 중인 자바스크립트 라이브러리이자 웹 프레임워크이다.

React를 사용하지 않더라도 HTML, CSS, JS 만으로도 웹페이지를 만들 수 있지만 React를 이용해 사용자와 상호 작용할 수 있는 동적인 UI를 쉽게 개발할 수 있기 때문에 많이 사용된다. React 말고도 Vue나 Angular와 같은 프레임워크들이 사용되고 있는데 현재 가장 많이 사용되고 있는 것은 React인 것이다.

2. React의 특징

1. Data flow

React는 단방향 데이터 흐름을 가지고 있다고 한다.

Angular.js와 같은 양방향 데이터 바인딩은 개발 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해질 수 있지만 React의 경우는 복잡한 어플리케이션의 경우에도 데이터 흐름에서 일어나는 변화를 보다 예측 가능하도록 단방향 흐름을 가지도록 했다고함.

2. 컴포넌트 기반 구조

컴포넌트란 독립적인 소프트웨어 모듈을 의미한다.

React의 경우 UI를 여러 개의 컴포넌트로 나누어서 개발한다. 즉 여러 컴포넌트를 모아서 하나의 페이지를 구성하는 것이다. 컴포넌트 별로 나누어져 있기 때문에 전체 코드를 파악하기 쉽다.

그리고 코드를 반복해서 작성할 필요없이 컴포넌트를 import하여 간단히 사용할 수 있다.

애플리케이션이 복잡해지더라도 코드의 관리와 유지보수가 용이하다는 장점이 있다.

3. Virtual DOM

DOM은 Documnet Object Model이며 html,css,xml등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다.

React는 이 DOM TREE 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 DOM으로 이벤트가 발생할 떄 마다 Virtual DOM을 만들고 다시 그릴 때마다 실제 DOM과 비교하여 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영하여 어플리케이션의 효율성과 속도를 개선할 수 있다고 한다.

4. Props 와 State

  • Props

    Props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다.

    쉽게 읽기 전용 데이터라고 생각하면 될 것 같다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.

  • State

    State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.

5. JSX

React는 JSX문법을 사용할 수 있는데 Javascript에 XML을 추가한 확장한 문법이라고 보면 된다.