01 리액트 소개

김혜진·2023년 1월 29일

리액트 퀵스타트

목록 보기

1/5

리액트란?

페이스북에서 만든 웹 UI를 작성하기 위한 자바스크립트 라이브러리
MVC(Model, View, Controller) 중에서 뷰, 즉 UI에 집중하는 라이브러리
UI 영역의 재사용을 위해 캡슐화된 컴포넌트를 만들고, 여러 컴포넌트를 조합해 UI를 만든다.
JSX를 이용하면 뷰를 선언형으로 작성할 수 있다.

웹 애플리케이션을 작성하는 세 가지 방법

전통적인 웹 애플리케이션

ex) JSP, Servlet, ASP, PHP 등

페이지 요청
페이지 생성
페이지 응답
화면 전체 갱신

HTTP 서버에 페이지 단위로 요청
서버는 JSP, PHP를 실행하여 HTML 페이지 생성
페이지가 응답하면 브라우저 화면이 새로 생성된 페이지로 갱신

단점
요청-응답의 단위가 페이지라서 화면의 일부분만 갱신하고 싶어도 페이지 전체를 갱신해야 한다는 것
HTTP 서버와 네트워크에 부하가 발생하고, 사용자는 브라우저 화면 깜빡임 현상 경험

멀티 페이지 애플리케이션 (Multi Page Application, MPA)

화면이 전환될 때 새로운 HTML 페이지로 이동
새로운 HTML 페이지는 기본적인 레이아웃이 있는 초기화면을 제공
사용자와의 인터랙션에 의한 화면의 변화는 HTTP 통신으로 서버에서 데이터를 받아와서 자바스크립트 코드로 화면을 뿌려줌

ex) jQuery
jQuery가 제공하는 AJAX 처리 함수를 이용해 이와 같은 방식으로 개발하는 경우가 많았다.
필요한 데이터(ex- JSON)를 HTTP 서버로부터 받아와 자바스크립트로 UI를 표현
아예 다른 화면으로 전환할 때는 다른 페이지로 이동하는 방법 사용 (index.html -> search.html)

단일 페이지 애플리케이션 (Single Page Application, SPA)

하나의 페이지가 하나의 애플리케이션
즉, HTML 페이지 하나로 개발된 애플리케이션을 말한다.
하나의 HTML 페이지만으로 구성된 애플리케이션이지만 여러 화면을 표현할 수 있다.

영속성을 가진 데이터 처리는 HTTP 서버와의 통신을 이용하기 때문에 화면이 부드럽게 전환된다.
사용자에게 더 나은 사용자 경험(UX) 제공 가능

단점

효과적인 상태관리 필요
SPA는 하나의 페이지에 여러 화면의 기능을 구현해야 해서 화면마다 처리할 데이터가 많은데, 이런 데이터들을 상태(state)라고 부른다.
각 화면의 상태와 애플리케이션 수준의 전역 상태를 구분해서 관리해야하므로 효과적인 상태 관리 방법이 필요
느린 DOM이 성능을 저하시킴
SPA는 웹 브라우저의 DOM을 빈번하게 갱신한다. 하지만 브라우저 DOM을 직접 조작하는 것은 브라우저 내부에서 많은 리소스를 사용하는 작업이므로 화면 성능에 나쁜 영향을 준다.
이로 인해 화면 전환이나 데이터 변경이 일어날 때 사용자 경험이 훼손될 수 있다.
자바스크립트 코드로 HTML 마크업을 생성하도록 제어해야 함
자바스크립트로 HTML 마크업을 생성하려면 문자열을 이어붙여야 한다.
이 작업은 개바 생산성을 떨어뜨리고 유지보수가 불편해서 협업을 어렵게 한다.

리액트 실행방식과 특징

상태관리와 단방향 데이터 바인딩

리액트는 컴포넌트 수준에서 상태 관리 기능을 제공
애플리케이션 수준의 전역 상태 관리를 위해 여러 가지 기능과 라이브러리(Context API, Redux, Recoil, MobX)를 사용할 수 있다.

리액트에서는 상태가 바뀌면 뷰(UI)가 즉시 바뀜.
하지만 반대로 뷰에서 사용자가 직접 입력 필드에 타이핑 한 값이 상태를 변경할 수는 없다.
직접 상태를 변경하는 경우는 '양방향 데이터 바인딩'이라고 부르며,
리액트가 아닌 Vue나 Angular 같은 프레임워크가 양방향 데이터 바인딩을 지원한다.

대신 리액트는 리액트의 이벤트 시스템을 이용해 이벤트 핸들러 메서드를 작성하고, 메서드 내부에 상태를 변경하는 코드를 작성해야 한다.
상태는 반드시 이벤트 처리기(event handler)를 통해서만 변경되기 때문에 상태가 변경되는 과정에 대한 예측과 추적이 용이해지는 장점이 있다.

JSX

JSX(JavaScript XML)은 마치 HTMl 마크업이 있는 템플릿처럼 보이지만, XML과 유사한 자바스크립트 확장 문법이다.
JSX로 리액트 컴포넌트의 렌더링 코드를 작성할 때는 자바스크립트로 변환되어 실행된다.
JSX를 이용하면 SPA의 단점 중 하나인 자바스크립트 코드로 화면의 렌더링을 제어해야하는 불편함이 해결되는 등 개발 생산성 면에서 유리하다.
또한 JSX는 HTMl 마크업과 유사해서 협업할 때도 훨씬 유리하다.

컴포넌트 기반의 개발

리액트는 UI를 만들기 위한 라이브러리이며, UI의 특정 부분과 관련한 기능을 컴포넌트 단위로 개발한다.
컴포넌트 내부는 모두 자바스크립트로 개발할 수 있다.

컴포넌트는 UI를 위한 DOM 요소를 생성하고 조작한다.
SPA의 또다른 단점인 DOM을 직접 조작하는 것에 대한 고비용의 문제를 해결하기 위해 가상 DOM(Virtual DOM)을 사용한다.

가상 DOM은 브라우저 DOM을 추상화한 브라우저 메모리상의 자바스크립트 객체
리액트 컴포넌트는 가상 DOM으로 렌더링을 수행하고, 가상 DOM에서는 이전 버전과 새로운 버전을 비교해서 차이가 나는 부분만 브라우저 DOM으로 업데이트 수행
따라서 개발자는 UI 업데이트를 위해 리액트 컴포넌트 단위로 항상 전체를 렌더링하도록 작성해도 된다.

가상 DOM의 성능

가상 DOM을 사용한다고 해서 렌더링 성능이 보장되는 것은 아니다.
첫 화면에 많은 데이터를 이용해 UI를 생성하는 경우, 가상 DOM을 사용하면 가상 DOM이라는 단계를 하나 더 거쳐서 브라우저 DOM에 렌더링하는 것이므로 성능이 더 떨어질 수 있다.

가상 DOM은 조금씩 상태가 자주 바뀌는 대규모 애플리케이션에서 능력을 발휘한다.
정적인 UI나 데이터가 자주 바뀌지 않는 화면이라면 굳이 리액트를 사용하지 않아도 된다.
리액트를 사용하면 컴포넌트 수준에서 간결하게 화면 업데이트를 처리하면서도 고성능의 화면 렌더링 기능을 제공한다.

Node.js

구글에서 만든 V8 자바스크립트 엔진을 기반으로 만든 자바스크립트 실행 엔진
Node.js를 이용하면 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행할 수 있다.
리액트 애플리케이션은 브라우저에서 실행되기 때문에 Node.js가 리액트 애플리케이션을 실행할 때 필요하지는 않지만 리액트 개발을 위해 사용하는 여러 가지 도구들이 Node.js를 필요로 하기 때문에 설치가 필요하다.
Node.js를 설치하면 npm이라는 도구가 함께 설치되는데, 이 도구를 이용해 라이브러리 또는 패키지를 인터넷 상의 레포지토리로부터 내려받을 수 있다.