React 란

gjeon·2021년 8월 14일

React React란?react단점 react장점 react특징

React

목록 보기

1/9

React 란

리액트는 대표적인 프론트엔드 라이브러리이다. 많은 사람들이 프레임워크라고 생각하곤 하는데 리액트 홈페이지에 보면 라이브러리라고 나와있다.
라이브러리와 프레임워크의 차이는

라이브러리는 애플리케이션을 제어하는 도구이고
프레임워크는 애플리케이션을 품고 애플리케이션 코드가 프레임워크를 제어
제어의 역전에 따라 종류가 나뉜다 할 수 있다.

이러한 라이브러리를 사용하는 이유는?

단순 HTML, CSS, javascript 만을 사용하여 웹페이지를 개발할 수도 있는데 이러한 경우 다양하게 변하는 유저의 동작에 따라 즉각적인 반응이 없는 정적인 페이지가 만들어진다. 최근 웹은 유저의 행동에 따른 다양한 데이터 및 UI변화를 요구하는데 이러한 부분을 프레임워크나 라이브러리 없이 한다고 하면 관리적인 측면에서 상당한 어려움이 있기에 프레임워크나 라이브러리를 채택하고있다.

그중에 React

기존에도 다양한 프레임워크나 라이브러리들이 존재했었다.
하지만 공통적으로 사용되는 모델은 UI로직과 서비스 로직의 양방향 바인딩을 통하여 서로의 모델 값을 동기와 시킨다.
둘 중 하나만 변경되면 다른 한쪽도 변경이 되는 방식인데 예를 들어 처음 화면을 하나 그린 뒤에 변경사항이 있으면 변경된 부분을 바꿔주는것이다.
설명만 보면 그걸로도 충분한데? 라는 생각이 들었지만 이러한 과정은 상당히 복잡한 작업이라고 한다.
그래서 리액트가 나왔다.

React 의 탄생?

특정 이벤트 발생시 데이터에 변화가 생기고, 그 변화에 따라 특정 DOM을 선택적으로 가져와 뷰를 업데이트 해주어야되는데 이러한 복잡한 과정없이 기존 뷰를 없애고 새로 만들면 어떨까 라는 발상에 의해 태어났다고 한다.
DOM은 업데이트시 전체 구조를 전체 다시 한번 그리는 방식으로 되어있어 DOM 기반으로 작동하는 페이지에서 이벤트 발생때 마다 뷰를 새로 그리면 성능상 엄청난 문제가 발생할 수 있다고 한다. 이를 해결하기 위해 가상의 DOM(Virtual DOM)을 사용하여 변화가 있는 부분만 컴포넌트를 대체 하여 바꿀 수 있게 되었다 한다.

이를 통해 리액트는 양방향이 아닌 단방향 데이터 바인딩을 할 수 있다. 그렇게 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게한다.

DOM이 무엇이기에 이것을 기반으로 작동하고 성능에 예민한 것인가?

리액트에 대해 찾다보니 DOM에 대해 많이 나오는것 같다.

Document Object Model의 약자로 문서 객체 모델이다.
해석하면 문서 객체를 인식하는 방식으로 해석할 수 있다.
웹브라우저가 HTML 페이지를 인식하는 방식을 의미한다.
DOM은 tree형식이다. 위쪽은 부모 아래쪽은 자식으로 가지를 뻗어나가는 형식이다.
웹페이지를 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
브라우저는 사용자가 요청하여 받아온 html파일을 파싱하여 DOM 트리를 그리고 CSS파일을 파싱하여 이를 결합한 후 렌더링을 하는 작업을 우리의 화면에 드려준다.
html을 불러오고 그 html을 구조화해서 스크립트나 CSS와 같은 언어들이 DOM 구조에 접근하여 커스텀 할 수 있게 만들어주는 연결 부분 역할이다.

HTML은 단순히 규칙에 따라 정해진 태그, 속성값으로 이루어진 언어이며, DOM은 이를 받아 구조화 하여 css, script와 결합할 수 있게 연결해주는 객체 모델로 객체에 접근 가능한 API 이다.

그럼 Virtual DOM이란?

말 그대로 가상의 DOM으로 이벤트로 인해 데이터가 변하면 실제 브라우저의 DOM에 넣는것이 아닌 javascript로 이루어진 virtual DOM에 한번 렌더링 하고, 기존의 DOM과 비교한 후 변화가 필요한 곳에만 업데이트를 해주는 것이라 한다.
현재 React외에도 여러 프레임워크 라이브러리에서도 Virtaul DOM을 사용하고 있다.

React 특징

컴포넌트
- UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이다.
- 그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만들어진다.
- 그런 작은 컴포넌트드로 쪼개져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉽다.
- 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에 똑같은 코드를 반복적으로 입력할 필요가 없어서 효율적이다.
- 컴포넌트의 종류는 클래스형과 함수형이다.
단방향 데이터 바인딩
- 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 올라가진 않는다. 부모의 데이터를 바꿔주기 위해서는 state를 이용해야함.
Props and State
리액트는 내부적으로 State와 Props를 가진다. 이는, UI(User Interface)가 사용자의 동작(Actions)에 따라 다른 UI나 Action이 필요하기 때문이다.
- props
  - props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. props는 읽기전용 데이터라 생각하면 된다.
  - 자식 컴포넌트에서 전달 받은 props를 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
- state
  - 동적인 데이터를 다룰때 사용한다.
  - 사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용한다.
Virtual DOM
- 가상 Document Object Model을 말한다.
- 일반적으로 html코드를 짜고 웹 브라우저에서 html 파일을 열게되면, html코드들이 DOM을 만든다.
- 그리고 만약 html 코드의 특정 한 부분이 변경되게 된다면 전체 DOM을 새롭게 만들게 되어 비효율적인 구조이다.
- 이러한 문제들로 가상돔을 통하여 진짜 DOM과 비교 후 변경 사항이 있을 경우 전체가 아닌 변경된 부분만 진짜 DOM의 반영하는 방식으로 작업을 수행한다.
- 앱의 효율성과 속도를 높일 수 있게 된다.
선언형
- jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않는다.
- 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해준다.

React 장점, 단점

장점

Virtual DOM을 사용하여 메모리 관리에 효과적(구조를 잘못짜면 오히려 독)
서버 랜더링을 지원한다.
- 보통 페이지 로드시 데이터를 가져오게 할시 처음에 아무것도 보여지지 않다가 처리가 끝나면 그때 보여지는데 초기 구동 딜레이가 어느정도 존재한다. 하지만 리액트는 서버&클라이언트 랜더링을 지원하여 초기 렌더링을 서버 렌더링으로 하여 서버측에서 html을 미리 생성하고 문자열 형태로 미리 보여준뒤 다시 클라이언트 렌더링을 한다. 서버에 부담이 가는것을 어느정도 부담을 해야되지만 사용자의 쾌적한 사용을 원하면 사용한다. 검색엔진 최적화에 중요하게 쓰인다.
- 보통의 라이브러리들이나 프레임워크는 뷰에서 서버 렌더링을 사용하려면 서드파티 라이브러리를 사용해야하는데 리액트는 자체에서 지원한다 .
React는 JavaScript 객체 형태의 Virtual DOM 을 사용하여 어플리케이션의 성능을 향상시킴 (JavaScript Virtual DOM 처리가 실제 DOM 보다 빠르기 때문)
서버 & 클라이언트 사이드 렌더링 지원을 통해 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능해짐
Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용 용이
React는 프레임워크가 아닌 라이브러리기 때문에 다른 프레임워크와 혼용 가능
2006년 쯤 나와서 Virtule DOM을 효과적으로 사용한 선발주자로서 리액트를 사용하는 수많은 플러그인이 나왔는데 이것과 비슷하게 리액트 라이브러리도 많이 만들어짐. 그래서 자료가 방대하다.

단점

보여지는 것에만 관여하기에 이외의 기능은 다른 라이브러리를 사용하여 구현하여야 한다.
- 배우기 쉽지만 프로젝트를 구현할때 뷰 이외의 기능은 직접 구현하거나 라이브러리를 사용하여 구현하여야 하기에 자바스크립트 배경지식이 부족하다면 힘들어 할 것이다.
IE8이하 낮은 버전의 익스플로어의 경우 지원을 안해주기에 사용을 하려면 리액트 버전 14이하를 사용하거나 babel이라는 자바스크립트 컴포넌트를 사용해야된다.
inline-template 과 JSX 를 사용하는데, 일부 개발자들에게는 적응이 안 될 수 있음.