리액트 - 소개 및 특징

react logo

 

react 란?

1. 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 JavaScript 라이브러리
2. 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합 
3. 화면을 만들기 위한 자바스크립트 라이브러리
4. 현재 가장 많이 활용되고 있는 인기 있는 라이브러리
5. 사용자와 상호 작용이 가능한 동적 UI 제작 가능

 

---

<react의 특징>

 

 

1. 단방향의 데이터 흐름

 부모에서 자식으로의 데이터 전달은 가능하지만, 자식에서 부모로의 데이터 전달이 불가능한 단방향의 데이터 흐름을 가지고 있다.

 

2. Component 기반 구조

* component : 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의 부품으로 만드는 방법

 

react는 UI(view)를 여러 컴포넌트를 쪼개서 만든다. 한 페이지에서 여러 부분을 컴포넌트로 만들고 이를 조립하여 화면을 구성한다.

 

컴포넌트 단위로 되어있기 때문에 전체 코드를 파악하기 쉽다. 실제로 리액트를 많이 다루어본 것은 아니지만 그 동안 리액트를 사용해보았을 때 부품(컴포넌트) 하나하나를 만들어 최종 페이지를 완성해나간다는 것이 코드 상으로 잘 보였다. 코드를 반복할 필요 없이 파일 한개 즉 Component만 import 해서 사용하면 된다는 간편함이 있었다. 관련있는 태그들의  부모와 자식 관계처럼 컴포넌트도 이런 식으로 구성하여 사용하면 코드가 좀 더 직관적이고 부품마다의 완성도가 클 것 같다.기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높은 동시에 코드의 유지보수, 관리가 용이하다.

 

 

3. Virture DOM 

 * DOM : Document Object Model

 

 이벤트가 발생할 때마다 Virture DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교한다. 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영한다. 이는 앱의 효율성과 속도를 개선하는 데에 도움을 준다.

 

 

4. Props and State

Props는 부모 컨포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. props를 전달하는 최상위에서만 props를 변경이 가능하다. 

 

State는 컴포넌트 내부에서 선언되고 내부에서 값을 변경할 수 있다. 각각의 state는 독립적이며 클래스형 컴포넌트에서만 사용가능하다가 근래들어서는 함수형에서도 사용하고 있다고 하셨다.

 

 

5. JSX

 JSX = JavaScript + XML 라고도 할 수있으며, JavaScript를 확장한 문법으로 React Element를 생성한다. JSX 사용이 필수는 아니지만 편의성을 위해 대부분의 프로젝트에서 많이 사용된다.