[ReactJS] React란 무엇일까?
개요
프로젝트를 진행하면서 사용한 React에 관해 이해한 개념을 주요한 특징과 함께 정리한다.
목차
소개
1. React란?
React의 정의
리액트는 싱클 페이지 애플리케이션(SPA) 혹은 모바일 애플리케이션 개발을 쉽게 만들어주는 Javascript 기반의 Library이다. 즉, 사용자 인터페이스를 개발하기 위해 필요한 것들을 사용하기 쉽게 구현해놓은 집합체이다.
React의 차별성
기존 html,css,js로도 웹 페이지를 구성 할 수 있다. 하지만, ReactJS를 사용한다면 상태를 관리하는 캡슐화된 컴포넌트를 생성하여 코드의 재사용성을 높히고, 개발자는 컴포넌트들을 조합해 복잡한 UI를 손쉽게 구현 할 수 있다.
2. React 특징
가상 돔(Virtual Dom)
리액트가 사용하는 가상 돔을 이해 하기 위해 Html과 Css가 Rendering 되는 과정을 먼저 이해해야 한다.
- 웹 브라우저가 네트워크를 통해 HTML과 CSS 파일을 받으면 브라우저의 렌더링 엔진은 HTML과 CSS를 Parsing 하여 DOM Tree와 Style Rules를 생성한다.
- 그 후 브라우저는 Attachment 과정에서 스타일 정보를 계산하고, 렌더 트리로 생성된 모든 노드들이 갖는 attach라는 method를 호출 해 결과값을 객체 형태로 반환한다. 이 때 계산과정은 모두 동기적으로 실행되어, 만약 렌더 트리에 새로운 노드가 추가된다면 해당 노드의 attach 메소드가 호출되어 계산 과정을 거친다.
- 위의 과정이 완료되면 Layout의 과정을 통해 노드에 좌표를 부여해 어느 위치에 표시될지를 결정한다.
- 마지막으로 Painting 과정을 통해 각 노드들이 갖는 paint 메소드를 호출하여 렌더링된 요소들에 색상을 입힌다.
위와 같은 Rendering 과정을 거친 후 Javascript를 통해 DOM을 조작하게 되면, 각 노드의 좌표를 계산하기 위해 레이아웃과 페인팅 과정을 다시 실행해야 하는데 이를 리플로우(Reflow), 리페인트(Repaint) 라고 한다. 싱글 페이지 애플리케이션의 경우 이러한 과정에 많이 일어나게 되면 웹 서비스의 성능이 더욱 저하되는 문제가 발생하게 된다.
이를 보안하기 위해 ReactJS에서는 가상 돔(Virtual Dom)을 사용하여 메모리상에 DOM과 동일한 DOM(=SSR을 가능하게 한다.)을 만들어, 모든 연산을 실행 후 실제 DOM과의 상태를 비교하여 최소한의 변경사항만 실제 DOM에 반영해 리플로우와 리페인트 과정을 최소화 시켜 DOM이 자주 갱신되는 싱글 페이지 애플리케이션의 성능을 최적화 시킨다.
Data Flow
리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 바인딩을 사용한다. 양방향 데이터 바인딩의 경우 여러개의 Watcher가 UI와 데이터를 자동으로 동기화 시켜주기 때문에, 프로그래머는 데이터 변경에 따른 동기화를 신경 쓰지 않고 프로그램을 작성할 수 있게된다. 하지만 데이터가 많아지게 되면 여러 데이터들을 동기화 하기 위해 사용되는 Watcaher의 갯수가 늘어나게 되고 이는 성능 저하를 유발한다.
리액트가 사용하는 단방향 데이터 바인딩은 단 하나의 Watcher를 사용하여 데이터를 감지해 UI 데이터를 갱신한다. 이 때 단 하나의 Watcher만 사용하므로 성능을 개선 시킬 수 있으며 데이터의 흐름을 추적하기가 쉽고, 데이터 흐름에서 일어나는 변화를 예측하기 용이해진다.
JSX
리액트는 JSX라는 독특한 문법을 갖고 있는데 이는 Javascript를 확장한 문법으로, Javascript안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 될 수 있도록 이끈다. JSX는 HTML과 Javascript를 동시에 사용하며, HTML 안에서 Javascript의변수들을 바로 사용 할 수 있는 일종의 템플릿 언어이다.
컴포넌트(Component) 기반 구조
리액트 개발의 특징은 컴포넌트(Component=독립적인 단위의 소프트웨어 모듈)라고 불리는 작고 고립된 코드들을 조합하여 UI를 구성한다.
- 컴포넌트들을 재사용 할 수 있으며, 개발 생산성 향상 가능
- 컴포넌트들의 크기가 작기 때문에 테스트하기 용이하고 코드의 유지보수 효율 상승
- 컴포넌트 단위로 쪼개져 있기 때문에 전체 코드를 파악하는데 있어 용이
class App extends Component {
render() {
return (
<Header />
<Body />
<Footer />
)
}
}
선언형 프로그래밍
리액트는 선언형 프로그래밍으로 어떻게(How)에 집중하는 것이 아닌 무엇(What)에 집중하여 프로그래밍을 한다.
리액트라이브러리를 활용하면 프로그래머는 비선언형적인 부분을 캡슐화하여 명령형 프로그래밍 언어를 통해 선언형 프로그래밍을 할 수 있게 된다. 이 때 명령형 프로그래밍 언어가 어떻게 동작하는지는 관심이 없으며 리액트는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 하여 결과만 갖고 오게 된다. 이를 통해 리액트는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줄 수 있게 된다.
Props and State
- Props: 부모 컴포넌트에서 자식 컴포넌트로전달해주는 데이터이다. 자식 컴포넌트는 props를 이용해 입력 데이터를 다루는 것 외에도 내부적인 상태 데이터를 가질 수 있다.
- State: 컴포넌트 내부에서 선언하여 내부에서 값을 변경 할 수 있다. 컴포넌트의 상태 데이터가 바뀌면 render()가 다시 호출되어 갱신된 값이 반영되게 된다.
3. React의 미래
접근성
리액트는 개발 경험이 적은 개발자들에게 있어, 많은 양의 정보가 있기에 접근에 있어 용이하다. 이는 자연스레 많은 커뮤니티를 구성 할 수 있게 해주고 오류가 발생 했을 때 스스로 해결 할 수 있게 도울 수 있다.
다른 라이브러리들과 프레임워크
시간이 지나면서 React를 대체 할 수 있는 많은 라이브러리들과 프레임워크들이 등장하고 있다. 이는 React의 장점들은 갖고 있으면서도 단점들은 보안된 형태로 등장한다. 리액트에서 가장 많이 언급되는 단점들인 Hook의 가독성, 애매모호한 Functional Component, useEffect에서의 Ajax 처리에 대한 어려움은 React를 이용하는 개발자들이 많아 질수록 더 많이 호소 될 것이다. 이는 곧 React가 발전 될 수 있음을 나타냄과 동시에 다른 라이브러리 혹은 프레임워크에 밀릴 수 있음을 시사 한다고 개인적으로 생각된다!
참고사이트
1. https://ko.reactjs.org/
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
'Front End > ReactJS' 카테고리의 다른 글
| [ReactJS] React를 활용한 카운트 다운(3,2,1) 구현 (2) | 2022.09.19 |
|---|---|
| [ReactJS] React Hook(리액트 훅) 이란? (2) | 2022.08.02 |
| [ReactJS] useRef vs useState vs 전역변수 (0) | 2022.07.26 |
| [ReactJS] npm 명령어 입력시 초기 루트 Url 설정 (0) | 2022.03.27 |
