React란?

리액트는 프론트엔드 라이브러리이다.

프론트엔드 라이브러리는 다양한 유저 인터페이스와 인터랙션을 제공할 때 이를 수월하게 해주는 것이다. HTML, CSS로 정적인 '페이지'로 동작시킬 수 있으며, Javascript를 더해주면 동적인 '페이지'로 동작시킬 수 있다. 그럼에도 불구하고 React나 Vue의 도움으로 *DOM 관리와 상태 값 업데이트 관리를 최소화하고 오로지 기능 개발과 사용자 인터페이스 구현해 웹 '애플리케이션'으로 개발에 집중할 수 있도록 해준다.

* DOM(Document Object Model) : 문서 객체 모델이다. 웹 페이지에 대한 프로그래밍 인터페이스이며 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다. 즉 HTML 요소들의 구조화된 표현이다.

DOM을 가져올 땐, document.getElementById 또는 $()를 사용해 가져올 수 있다.

React

리액트는 "컴포넌트" 라는 개념에 집중이 되어있는 라이브러리다. 컴포넌트는 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여준다. 주로 MVC나 MVVM 구조를 써왔다면 양방향 바인딩을 통해 모델에 있는 값이 변하면 뷰에서도 변화시켜준다. 특정 이벤트가 있을 때 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트해줄지 로직을 정해줘야 한다. 따라서 리액트는 변화 대신 데이터가 바뀌면 뷰를 날리고 새로 만들어버리자는 발상을 했다. 하지만 DOM기반으로 작동하면 성능이 엄청나게 좋지 않아 Virtual DOM을 사용한다.

Virtual DOM은 가상의 DOM이다. 변화가 일어나면 실제로 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, 자바스크립트로 이뤄진 가상 DOM에 한 번 렌더링을 하고, 기존의 DOM과 비교한 다음에 정말 변화가 필요한 곳에만 업데이트를 해준다. 즉, 어떻게 업데이트 할 지 고려하는 게 아니라 바뀐 데이터로 일단 그려놓고 비교한 다음에 바뀐 부분만 찾아서 바꿔준다.

Virtual DOM은 DOM 변화를 최소화 시켜주는 역할을 한다. 이 횟수를 최소화시키는 것은 성능적으로 매우 중요한 이슈다. 물론 DOM Fragment에 적용한 다음 기존 DOM에 던져주면 되지만 DOM Fragment를 관리하는 과정을 수동으로 하나하나 작업할 필요 없이 Virtual DOM은 자동화하고 추상화한다. 자동으로 어떤 게 바뀌었는지, 어떤 게 바뀌지 않았는지 알아내 준다. 또한, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM을 조작할 것이라던지, 이미 조작했다던지에 대한 정보를 공유할 필요가 없다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는 것이다.

특징

1. 단방향 데이터 흐름 : props를 통해 부모 컴포넌트와 자식 컴포넌트간에 데이터를 전달할 수 있는데, 데이터를 전달할 때 부모에서 자식에게로만 데이터 전달이 가능하다.

2. JSX 문법 사용 : 자바스크립트를 확장한 문법으로 React.createElement() 호출을 반복해야 하는 불편을 해소한다.

3. 컴포넌트 기반 : 웹 페이지를 작성할 때 하나의 HTML 코드를 집어넣는 것이 아니라, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜준다.

4. Virtual DOM : 메모리 데이터 구조 캐시를 만들고, 변화된 부분을 계산하고 DOM을 업데이트한다. 마치 모든 페이지가 변경될 때마다 렌더링 되는 것처럼 보이게 한다.

 

참조 : https://spicycookie.me/React/reactintro/

Home

참조 : velopert