리액트에 대해 알아보기 !

 

 

목차

• 리액트에 대해서..
• 리액트의 대표적인 특징
• 리액트 설치를 위해 필요한 Tools

 

 

 

 

 

 

 

 

리액트에 대해서.. 👀

리액트는 페이스북사에서 만든 자바스크립트 라이브러리 중 하나이다. 페이스북에서 자체적으로 이용되고 있을 뿐만 아니라, 에어비앤비, 우버, 넷플릭스, 인스타그램 등 대체적인 웹 어플리케이션이 리액트로 만들어졌다. 

 

리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 즉, 리액트는 웹 UI를 만드는 라이브러리이다. 사용자에게 보여지는 UI를 만들고 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생하면 그에 맞게 반응하도록 만들어진 라이브러리라고 보면 된다. 

보통 조금 복잡한 어플리케이션 만들 때 MVC 패턴을 많이 이용한다. 리액트는 이 중에서 View 레이어를 담당하고 있다. 

 

MVC 패턴
디자인 패턴 중 하나로, 어플리케이션을 Model, View, Controller 각각의 레이어로 나누어 코딩하는 것을 말한다. 

 

 

웹 앱을 만드는 다른 툴인 Vue, Angular와 비교대상으로 많이 꼽힌다. 이들의 가장 큰 차이점은 프레임워크(Vue, Angular)와 라이브러리(React)의 차이다. (참고: 프론트엔드 프레임워크 비교(React, Vue, Angular), SPA란?)

리액트는 전적으로 UI를 렌더링 하는 데만 관여하기 때문에 라이브러리이다. UI 렌더링이 아닌 다른 기능 구현을 위해서는 다른 라이브러리를 함께 사용해야 한다. 

 

프레임워크
앱을 만들기 위해 필요한 대부분의 것을 갖고 있는 것. 즉, 프레임워크는 라이브러리를 포함한다. 

라이브러리
특정 기능을 모듈화 해 놓은 것. 프레임워크와 달리 따로 정해진 골격이 없어 개발자가 원하는 구조로 만들고, 필요한 기능에 따라 라이브러리를 골라 사용할 수 있다. 

 

 

 

 

 

리액트의 대표적인 특징

🟨 리액트 컴포넌트

리액트의 또다른 특징 중 하나는 여러 컴포넌트를 이용하여 웹 앱을 만든다는 것이다. 즉, 리액트는 컴포넌트 단위로 이루어진 UI를 만들 수 있는 라이브러리이다. 

 

컴포넌트
한 가지의 기능을 수행하는 최소한의 UI 단위
컴포넌트는 서로 독립적이고, 고립되어 있으며, 재사용이 가능하다. 그렇기 때문에 테스팅(유닛테스트)을 하기가 좋다.

 

컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있으며, 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 

컴포넌트는 데이터를 갖고 있는 state가 있고, 사용자에게 어떻게 보여줄 건지를 정의하는 render() 함수를 갖고 있다. 상태가 변할 때마다 render 함수가 계속 호출된다. 

 

 

🟨 가상돔

을 알아보기 전에 먼저, 브라우저가 그려지는 원리에 대해 알아보겠다. 

 

아래는 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정인 웹 페이지 빌드 과정(Critical Rendering Path, CRP)이다. (참고: 브라우저의 렌더링 과정)

1. 렌더 엔진이 문서를 읽어 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다. (DOM Tree 생성)
2. DOM과 CSSOM을 결합하여  화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력하게 된다. 즉, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다. (Render Tree 생성)
3. 브라우저가 페이지에 표시되는 각 요소 크기와 위치를 계산한다. (Layout (Reflow))
4. 실제 화면에 그린다. (Paint)

 

이렇게 브라우저에 페이지가 표시되기 위해서는 DOM Tree가 형성된다. 

하지만 위 과정에서 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성된다는 문제점이 발생한다. 

즉, 모든 요소들의 스타일을 다시 계산하는 Layout, Repaint 과정을 다시 거치게 되는 것이다. 이렇게 너무 많은 DOM에 변화가 일어나면 성능상에 영향을 미칠 수 있다.

 

 

리액트는 가상 돔(Virtual DOM)을 사용하여 이 문제를 해결한다. 

가상 돔이란, 실제 DOM을 메모리에 복사해준 것이다. 즉, 바로 리액트에 모든 구조가 DOM Tree에 업데이트되는 것이 아닌, 컴포넌트에 변동 사항이 생겨서 자식 컴포넌트의 render() 함수가 호출되면, 리액트는 이전의 virtual DOM Tree와 비교하여 실질적으로 어떤 부분이 업데이트되어야 하는지 계산한 뒤, 필요한 부분만 DOM Tree에 업데이트한다. 따라서 render() 함수가 많이 호출되어도 실질적으로 보이는 데이터가 변동되지 않으면 DOM Tree에는 전혀 영향을 주지 않아 성능 걱정을 하지 않아도 된다. 

사용자가 부드럽게 웹 어플리케이션을 이용하기 위해서는 60 fps 1초 안에 60개의 프레임이 업데이트될 수 있도록 성능을 신경 써서 만들어야 한다. 리액트는 기본적으로 이것을 보장한다. 

 

 

🟨 리액트 컴포넌트 종류

리액트 컴포넌트를 만드는 방법에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 

 

클래스형 컴포넌트

관련 데이터 함수들이 묶여 있는 것을 클래스라고 한다.

컴포넌트에서 가지고 있는 상태인 데이터를 담을 수 있는 state라는 오브젝트가 들어 있다. 그래서 state가 변경되면 render() 함수가 호출되면서 업데이트된 내용이 사용자에게 보여지는것이다.

또한 컴포넌트가 사용자에게 보여질 때, DOM Tree에 올라갔을 때, DOM Tree에서 나왔을 때, 그리고 컴포넌트가 업데이트되었을 때 등 다양한 컴포넌트의 상태에 따라 함수를 구현해 놓으면 리액트가 알아서 불러주는 라이프사이클 메서드가 있다.

 

함수형 컴포넌트

함수는 한 가지 기능을 수행하는 단위이다. 따라서 클래스형 컴포넌트와 같은 이런 state나 lifecycle 메서드가 없다. 

하지만, 리액트 16.8 버전부터는 함수에도 class에서 했던 것처럼 할 수 있는 React Hooks 이 도입되었다. 리액트 훅을 이용하면 함수 컴포넌트 안에서도 state도 가질 수 있고, 라이프사이클 메서드도 사용할 수 있다. 기존 클래스 컴포넌트에서 할 수 있던 것을 함수에서도 가능하게 해 주는 것이 리액트 훅이다.

 

 

 

 

 

 

🛠 리액트 설치를 위해 필요한 Tools

Node.js

크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로, 웹 브라우저 환경이 아닌 곳(백엔드 서버)에서도 자바스크립트를 사용하여 연산할 수 있다. 간단하게, Node.js는 자바스크립트를 실행할 수 있는 환경이며, 어느 곳에서 나 자바스크립트로 프로그래밍이 가능하게 하는 프레임워크다. (참고: Node.js 란?)

 

리액트 설치 시 Node.js가 필요한 이유는?

• 리액트 앱은 웹 브라우저에서 실행되는 코드라서 Node.js와 직접적인 연관은 없지만, 프로젝트 개발하는데 주요 도구들이 node.js를 사용하기 때문에 필요하다.
• 이때 사용하는 도구로는 바벨, 모듈화 된 코드를 한 파일로 합치고 코드 수정 시마다 웹 브라우저를 리로딩하는 등 여러 기능을 지닌 웹팩 등이 있다. npm을 통해 모듈 설치 및 실행 같은 기능이 필요하다. 아래에서 자세한 개념을 살펴보겠다 ! 

 

npm

라이브러리(패키지)들을 쉽게 관리할 수 있도록 도와주는 패키지 매니저이다. 

npm을 이용하면 간단한 명령어 하나로 라이브러리를 설치할 수 있고, 버전 업데이트 및 라이브러리 삭제도 가능하다. 

npm을 이용하면 프로젝트에 package.json 파일이 생기며, 이 파일 안에는 사용하는 외부 라이브러리들과 버전 정보가 담겨있다. 

 

npx

npm(manager 약자)은 앱 매니저고, npx(execute 약자)는 npm과 다르게 설치하는 것이 아니라 원하는 라이브러리를 실행할 수 있게 도와준다.

npm은 설치와 업데이트하는 것만 할 수 있고 그 라이브러리를 실행하지는 못한다. 실행하기 위해서는 프로젝트에 추가해서 프로젝트 자체를 실행해야 하지만, npx는 원하는 패키지를 실행할 수 있도록 도와주는 툴이다. 

따라서 라이브러리 설치는 npm을 이용하고, 프로젝트 실행은 npx를 이용한다. 

 

yarn

npm 보다 조금 더 성능을 개선하고, npm의 부족한 버전 관리, 성능, 보안 부분들을 보완하기 위한 새로운 패키지 매니저이다. 

yarn도 npm 위에서 동작하여 npm에서 사용하는 package.json 파일을 그대로 사용하며 npm과 호환적으로 사용할 수 있다. 

 

 

Babel

ECMAScript 2015+ 이후 버전의 문법을 예전 버전으로 변환하여, 예전 버전의 브라우저가 이해할 수 있는 소스코드로 변환하는 자바스크립트 트랜스컴파일러이다.

그래서 최신 버전의 자바스크립트 문법을 사용하면서 배포할 때는 바벨을 이용해서 예전 브라우저도 이해할 수 있는 예전 버전의 자바스크립트 코드로 변환해준다.

또한, 타입스크립트나 jsx라는 순수 자바스크립트가 아닌 것들을 브라우저가 이해할 수 있도록 자바스크립트로 변환해주는 일을 한다.

 

Webpack

프로젝트 소스 코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링하는 것이다. 

다시 말해, 여러 소스코드와 리소스 이미지들을 한 번에 묶어 번들 단위로 사용자에게 제공(코드 번들링)할 수 있도록 도와준다. 

또한, 자바스크립트 작성 코드를 줄여주고, 긴 변수나 함수 이름을 외부에서 알아보지 못하도록 다르게 변형하는 일도 한다. 

 

ESLint

특정 규칙을 가지고 코드를 깔끔하게 작성할 수 있게 도와주는 라이브러리이다. 

자바스크립트를 쓰는 가이드라인을 제시하고, 즉각적으로 코드 문법 오류와 같은 잘못된 점이 있다면 경고 사인을 보내준다. 

 

Prettier

코드 형식을 맞추는 데 사용한다.

작은따옴표를 사용할지 큰 따옴표를 사용할지, indent 값을 2로 할지 4로 할지 등 에러를 찾는 것이 아닌 코드 포맷터의 역할을 한다. 

 

CRA(Create React App)

바벨이나 웹팩 설정이 이미 다 되어 있어 많은 시간이 걸리지 않고 리액트 앱을 시작할 수 있게 도와준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

* 인프런 - 따라하며 배우는 리액트 A-Z 를 학습하며 배운 내용을 바탕으로 정리하였습니다.