1-1. 왜 리액트인가?

• 최대한 성능을 아끼고 편안한 사용자 경험(user-experience)을 제공하면서 구현하고자 개발한 것이 바로 리액트(React)이다.

1-1-1. 리액트 이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다.

※ 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있다. 이를 컴포넌트(component)라고 한다.

컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태크 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

※ 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 한다. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있나면, 리액트 컴포넌트가 최초로 샐행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다.

1-1-1-1. 초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 리액트에서는 이를 다루는 render 함수가 있다.

render() { ... }

이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할이다. html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있는데, 이 때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다.

컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두 가지 절차를 따르는데,

1. 문자열 형태의 HTML 코드를 생성
2. 특정 DOM에 해당 내용을 주입

하면 이벤트가 적용된다.

1-1-1-2 조화 과정

리액트 라이브러리에서 중요한 부분인 업데이트를 어떻게 진행하냐면 리액트에서 뷰를 업데이트할 때는 "조화 과정(reconciliation)을 거친다"라고 한다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실 새로운 요소로 갈아 끼우기 때문이다.

이 작업 또한 render 함수가 맡아서 한다. render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지 객체를 반환한다고 했는데, 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출한다. 그러면 그 데이터를 지는 뷰를 생성해 낸다.

하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM트리를 업데이트하는 것이다.

1-2. 리액트의 특징

1-2-1. Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다.

1-2-1-1. DOM이란?

DOM은 Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

1-2-1-2. Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 마치 실제 DOM의 가벼운 사본과 비슷하다.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세가지 절차를 밟는다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.

1-3. 작업 환경 설정

이제 본격적으로 시작할텐데 사전에 준비할 것들이 있다. window 운영체제만 작성하려고 한다.

1-3-1. Node.js 설치

Node.js 공식 내려받기 페이지(https://nodejs.org/ko/downlode/)에서 windows Installer를 내려받아 설치한다. 설치가 끝나면 명령 프롬프트 창을 열고,

node -v

v14.17.0

위와 같이 node의 버전을 입력하면 아래 v14.17.0 와 같이 버전이 나오면 잘 설치된 것이다.

1-3-2. yarn

Node.js를 설치할 때, 패키지를 관리해 주는 npm이라는 도구가 설치되는데, 이 책에서는 npm대신 yarn이라는 패키지 관리자 도구를 설치해서 사용한다고 한다. yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다고 한다.

yarn 내려받기 페이지(https://yarnpkg.com/en/docs/install#windows-stable)에서 Download Installer 버튼을 눌러 설치 프로그램을 내려받은 후 실행하면 된다.

설치 확인을 위해 명령 프롬프트 창에서

yarn --version

1.22.5

위 설명과 같이 나오면 잘 설치된 것이다.

1-3-3. 에디터 설치

에디터는 vscode로 사용한다고 한다. 이미 vscode가 익숙하고 지금도 사용하고 있기 때문에 간단하게 링크만 적고 생략하려고 한다.

VS Code 공식 내려받기 페이지(https://code.visualstudio.com/Download) 에서 받으면 된다.

1-3-3-1. VS Code 확장 프로그램 설치

에디터를 사용할 때 설치하면 유용한 확장 프로그램을 설치할려고 하는데

1. ESLint: 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구이다.
2. Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 이쓴ㄴ 코드 스니펫 모음이다. 검색했을 때 유사한 결과가 여러 개 나올 수 있는데 제작자가 charalampos karypidis인 것을 설치
3. Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구이다.

1-3-4. Git 설치

Git은 형상 관리 도구(Configuration Management Tool)로 프로젝트 버전을 관리하고 협업을 할 때 미우 핵심적인 역할을 한다.

Git 공식 내려받기 페이지(https://git-scm.com/download/)에서 설치 파일을 내려받아 설치하면 된다.

1-3-5. create-react-app으로 프로젝트 생성하기

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다. 나중에 설정을 커스터마이징해야 하면 자유롭게 설정을 변경할 수도 있다. 이 도구를 사용하는 방법은 매우 간단하다. 터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서

yarn create react-app hello-react

명령어를 실행하면 된다.

리액트 프로젝트를 만들 때는 위와같이

yarn create react-app <프로젝트 이름>

명령어를 사용한다. 프로젝트 이름은 자유롭게 정하면 된다.

프로젝트 생성이 완료되었다면 다음 명령어를 입력해서 프로젝트 디렉토리로 이동한 뒤 리액트 개발 전용 서버를 구동해본다.

cd hello-react
yarn start

그러면

위와같이 페이지가 띄워진다면 준비는 끝이다.