React.js란?
리액트는 자바스크립트 라이브러리 중 하나로 사용자 인터페이스(UI)를 만들기 위해 사용된다.
페이스북에 의해 2013년도에 발표되었으며 프런트엔드 부분에서 Vu.js, Angular 와 함께 가장 있기 있는 라이브러리 중하나이다. 이러한 라이브러리들은 DOM관리, 상태값 업데이트 관리를 최소화하고, 개발자가 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 많은 기능들을 제공한다.
그 중 React 는컴포넌트 개념에 가장 집중 되어 있는 라이브러리이며 매우 넓은 생태계를 보유하고 있다. 또한 다음과 같은 특징을 가지고 있다.
React의 특징
1. 선언형
- 리액트는 선언형 성격에 따라 컴포넌트를 얻기 위해 jsx문법을 통해 구현된다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않는다. 리액트를 사용할 때 화면 설계라는 초점에 맞춰 개발할 수 있도록 해주기 때문에, 높은 생산성을 보장해 준다.
2. 컴포넌트 기반
- 컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 리액트는 웹에서 쓰는 각각의 요소들을 컴포넌트로 만들어 기존의 UI를 다른 화면에서 재사용 하거나 다른 프로젝트에서 재사용 할 수 있는 장점을 가진다.
3. Virtual DOM 기반
- Real DOM VS Virtual DOM : Real DOM을 사용할 경우 만약 10개의 리스트가 있다고 가정할 때 한가지의 리스트만 update 되더라도 전체 리스트를 다시 Reload 해야 하므로 작업이 expensive할 수 있다. 하지만 Virtual DOM을 사용할 경우 처음 상태를 저장해 놓은 Snap shot과 수정된 리스트만을 비교하여 이 부분만 DOM에서 바꿔줄 수 있다.
4. State와 Props
- 리액트는 내부적으로 State와 Props를 가지는데 ,이는 UI가 Action에 따라 다른 UI나 Action이 필요하기 때문이다.
- Props VS State : props는 컴포넌트간에 어떠한 인터렉션이 있을 때 부모 컴포넌트에서 자식 컴포넌트에 전달한 것은 자식 컴포넌트에서 자체적으로 수정할 수 가없다. 반면 State 는 컴포넌트 내에서 데이터를 교환하거나 전달 할 때 사용할 수 있으며 자체적으로 내부에서 변화를 줄 수 있는 Relandering 성질을 가진다.