#React

#React

 

리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다.

 

: 페이스북에서 제공하는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다.

- 웹 페이지를 만들기에는 html, css로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기때문에 리액트를 사용한다.

 

: 이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링한다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있다.

React-Native

모바일 웹을 만들도록 도와주는 library

Virtual DOM

가상의 Document Object Model로 실제 DOM을 조작하는게 아닌, DOM을 추상화한 자바스크립트 객체를 구상해 사용한다.

 

이전 UI 상태를 메모리에 유지해서, 변경될 UI의 초소 집합을 계산하는 기술이다. 즉, 현재 UI에 변경사항이 있을 때마다 실제 DOM을 전체적으로 그리는 것이 아닌, 가상 돔에 유지해둔 이전 UI상태와 비교하여 변경될 UI만 부분적으로 개선한다. 브라우저 내에서 발생하는 연산의 양을 줄임으로서 성능을 개선하는 기술이다.

 

데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리랜더링 한다.
이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교한다.
바뀐 부분만 실제 DOM 에 적용된다.

 

※ DOM (Documnet Object Model)

JavaScript Node 개체의 계층화된 트리로, HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.

React를 써야 하는 이유

• React는 JavaScript 객체 형태의 Virtual DOM 을 사용하여 어플리케이션의 성능을 향상시킴 (JavaScript Virtual DOM 처리가 실제 DOM 보다 빠르기 때문)
• 서버 & 클라이언트 사이드 렌더링 지원을 통해 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능해짐
• Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용 용이
• React는 프레임워크가 아닌 라이브러리기 때문에 다른 프레임워크와 혼용 가능

React 단점

• 보여지는 부분(View)에만 관여하기 때문에 데이터 모델링, Routing, Ajax 등 이외의 기능은 써드파티 라이브러리(Third party library, =패키지, 모듈로 불리기도함)를 이용하거나 직접 구현해야함
• IE8 이하 지원하지 않음 (IE8 이하 버전을 지원해야 할 경우 v0.14 버전을 사용 해야함)
• React는 inline-template 과 JSX 를 사용하는데, 일부 개발자들에게는 적응이 안 될 수 있음

React 특징

컴포넌트 기반의 라이브러리

헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다.

 

단방향 데이터 바인딩 (One Way Data Flow)

리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기때문에 상위(부모) 데이터를 바꾸기 위해서는 state를 이용해야 한다.

 

Props and State

[ Props ] 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 전달해주는 데이터이다. 하위(자식) 컴포넌트에서 전달 받은 props는 변경이 불가능하고, props를 전달해준 최상위(부모) 컴포넌트만 props를 변경할 수 있다.

 

[ State ] 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다. 

각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능하지만 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.