<리액트를 다루는 기술> 1장: 리액트 시작

INDEX

1장 리액트 시작

1. 왜 리액트인가?

● 리액트의 이해

2. 리액트의 특징

● DOM이란?

● Virtual DOM

● 기타 특징

3. 작업 환경 설정

● Node.js와 npm, yarn

● 에디터 설치

● Git 설치

● create-react-app으로 프로젝트 만들기

4. Question 개념 정리 및 코드 문제

● 개념 복습 문제

● 코드 문제

---

1. 왜 리액트인가?

● 리액트의 이해

자바스크립트는 단순한 스크립트 언어에 불과하지만 웹 애플리케이션에서 가장 핵심적인 역할

슬랙,  VS CODE 등의 데스크톱 애플리케이션 ➨ 일렉트론으로 개발

자바스크립트의 여러 프레임워크를 사용하여 페이스북, 디스코드 등 수많은 애플리케이션 개발

 

# 일렉트론: 자바스크립트로 데스크톱 앱을 개발하는 도구

# 프레임워크: 소프트웨어의 구체적인 부분의 설계, 구현을 재사용 가능하도록 협업화된 형태로 클래스들을 제공

 

자바스크립트 기반의 프레임워크로 애플리케이션을 관리

자바스크립트 기반의 웹 프레임워크

프레임워크들은 MVC(Model-View-Controller), MVVM(Model-View-View Model)형식 등 다양한 형식으로 애플리케이션 구조화

# 모델(Model): 애플리케이션에서 사용하는 데이터를 관리하는 영역

# 뷰(View): 사용자에게 보이는 부분 

 

MVC 구조

 

사용자에게서 어떤 작업을 받음(예: 버튼 클릭, 텍스트 입력) ➨ 모델 데이터를 조회, 수정 / 변경된 사항을 뷰에 반영

모델(Model)에서 수정된 부분을 통해 뷰(View)에 반영하는 과정에서 뷰를 변형하게 됨

사용자의 작업에 따라 업데이트할 항목을 찾아서 어떻게 변경할지 규칙을 정하는 작업은 간단

하지만 애플리케이션의 규모가 커지면 상당히 복잡해짐, 제대로 관리하지 않으면 성능이 떨어짐

 

 

페이스북 개발 팀의 생각

데이터가 변할 때마다 어떤 변화를 줄지 고민하지 말고 기존 View를 날려버리고 새로 렌더링하는 건 어떨까?

• 애플리케이션의 구조 단순화, 작성할 코드의 양이 줄어듦 ➨ 뷰(View)가 어떻게 생길지 선언하는 부분만 신경쓰면 됨
• 하지만 CPU의 점유율이 크게 증가할 것, 새로 렌더링해서 끊김 현상이 발생하는 등 메모리가 많이 사용될 것이기 때문

# 렌더링: 사용자 화면에 뷰(View)를 보여주는 것

최대한 성능을 아끼고 편안한 사용자 경험 제공하고 구현할 수 있는 라이브러리가 리액트다.

 

1.  왜 리액트인가?

리액트란?

• 자바스크립트 프런트엔드 라이브러리 중 하나로, 사용자 인터페이스(UI)를 만드는 데 사용한다. 컴포넌트(Component)라는 개념을 이용해 관리를 보다 쉽고 직관적으로 만들어 사용자 인터페이스를 동적으로 만들 수 있도록 도와준다. 
• 구조가 MVC, MVW 등의 프레임워크와 다르게 오직 V(View)만 신경쓰는 라이브러리
• 리액트는 모든 것이 컴포넌트(Component)로 구성
• 리액트로 만든 웹사이트: 페이스북, 인스타그램, 넷플릭스, 우버, 뉴욕타임즈 등등..

컴포넌트와 렌더링

• 컴포넌트: 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체, 템플릿과 다른 복합적 개념. 컴포넌트에서 생김새와 작동 방식을 정의, 자바스크립트의 함수와 비슷한 역할
• 렌더링: 데이터를 html로 변환하여 해석 후 사용자 화면(모니터)에 뷰를 보여주는 것

1-1. 초기 렌더링

데이터가 변할 때마다 기존 뷰를 날려버리고 새롭게 다시 렌더링?

➨ 초기 렌더링(컴포넌트가 최초로 실행한 렌더링), 리렌더링(컴포넌트의 데이터 변경으로 다시 실행한 렌더링) 개념

➨ 어떤 변화를 줄 지 고민하는 과정을 생략, 좀 더 빠른 속도로 렌더링

 

 

맨 처음에 사용자에게 어떻게 보일지를 정하는 초기 렌더링이 필요

눈에 보이는 화면을 구성하는 역할 ➨ render 함수

 

render 함수: 컴포넌트가 어떻게 생겼는지 정의한다.

• 뷰(View)가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체(Componemt, DOM 등의 리액트 엘리먼트)를 반환
• 이 함수를 실행하면 함수 내에 있는 컴포넌트들을 재귀(자기 자신을 재참조)적으로 렌더링

 

렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 실제 페이지의 DOM 요소 안에 주입한다.

 

#HTML 마크업: 마크업은 태그 등을 이용하여 문서나 데이터의 구조를 구성한다는 의미로, HTML 마크업은 html 태그를 사용하여 문서를 구조화한다는 의미

 

1-2. 조화 과정

리액트에서 뷰(View)를 업데이트 한다 ➨ 리액트에서 조화과정을 거친다.

변화에 따라 뷰가 변형되는 것처럼 보이지만, 새로운 요소로 갈아끼우는 개념 ➨ render 함수가 수행

 

render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는 지에 대한 객체를 반환

컴포넌트는 데이터를 업데이트했을 때 새로운 데이터를 가지고 render 함수를 다시 호출

그럼 새로운 데이터에 대해서 render 함수가 수행하고 새로운 값을 반환(View, Component 등)

 

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

 

---

2. 리액트의 특징

● DOM이란?

DOM(Document Object Model)

• 객체로 문서 구조를 표현하는 방법
• 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용,
• 트리 형태, 특정 노드를 찾아 수정/제거/삽입
• DOM은 동적 UI에 최적화되지 않음, 자바스크립트를 사용하여 동적으로 만들어줌

 

페이스북의 경우, 하나의 포스트를 표현하는데 100개의 div 태그가 사용된다.

웹 브라우저 DOM 변화가 발생하면 웹 브라우저가 CSS, 레이아웃, 페이지 등을 다시 재구성하는 과정에서 시간이 허비된다.

DOM 조작 ➨ 엔진이 웹 페이지를 새로 그림 ➨ 업데이트가 잦으면 성능 저하

 

해결법

DOM을 최소한으로 조작! 리액트에서는 Virtual DOM을 사용하여 DOM의 업데이트의 처리 횟수 최소화

 

● Virtual DOM이란?

실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체(실제 DOM의 사본)를 사용

 

1. 데이터의 변화가 생겼을 경우 Virtual DOM에 리렌더링한다.
2. 리렌더링한 Virtaul DOM과 이전의 Virtual DOM(데이터 변화 발생 전)에 있던 내용을 비교한다. (diff)
3. 비교 후 실제 DOM에 달라진 부분만 최소한의 연산을 통해 실제 DOM에 변경/적용한다. (patch)

이 방식은 루트 노드부터 시작하여 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만, 최적의 자원을 사용하여 수행

 

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기
리액트 매뉴얼 중

Virtual DOM을 사용한다고 해서 무조건 빠른 것이 아니다.

즉, 리액트를 사용하지 않아도 코드 최적화를 통해 DOM 작업이 느려지는 문제를 개선할 수 있고 작업이 간단할 때는 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.

리액트와 Virtual DOM이 제공하는 것은 업데이트 처리의 간결성, UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고 더 쉽게 업데이트할 수 있는 기능을 제공

 

● 기타 특징

1. 리액트는 오직 view만 관리. 리액트는 프레임워크가 아닌 라이브러리. 기타 기능은 직접 구현하여 사용

다른 개발자들이 만든 라이브러리를 활용하여 기타 기능을 구현

마음에 드는 라이브러리를 사용하여 설정 가능, 여러 라이브러리를 접해야 한다.

 

2. 다른 웹 프레임워크와 라이브러리와 같이 사용

프레임워크 = 키트/구성물품, 라이브러리 = 다른사람의 도구들라고 생각하면 둘의 차이를 이해햐기 쉽다.

# 프레임워크:  소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합

# 라이브러리: 단순 활용가능한 도구들의 집합, 개발자가 만든 클래스에서 필요한 클래스를 불러서 사용하는 방식

출처: https://webclub.tistory.com/458 [Web Club]

 

---

3. 작업환경 설정

● Node.js와 npm, yarn

 

※아래 설치 방법은 윈도우를 기준으로 작성하였습니다!

 

1. Node.js 설치

크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임

웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산

 

프로젝트를 개발하는 데 필요한 주요 도구들을 Node.js에서 사용

Node.js를 설치하면 npm도 같이 설치, npm으로 개발자들이 만든 패키지(재사용 가능한 코드)를 설치하여 패키지의 버전을 관리할 수 있음. 리액트도 하나의 패키지로, 실제로 npm에 등록된 패키지가 약 82만, 하루 475개의 패키지가 등록

Node.js 공식 내려받기 페이지(https://nodejs.org/ko/download/)에서 Windows Installer를 내려받아 설치

 

설치 후 잘 설치가 되었는지 확인, 명령 프롬프트 창에 입력!

$ node -v
v10.14.1

 

2. yarn 설치

npm 대신 yarn 설치, yarn은 npm 대체 도구로 npm보다 더 빠르고 효율적, 부가 기능을 제공

만약 npm을 이미 사용 중이며 익숙해져 있다 ? npm을 사용해도 무방

 

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

설치가 잘 되었는 지 확인!

$ yarn –version
1.12.3

● 에디터 설치

리액트 애플리케이션을 만들면서 코드를 수정할 때 사용할 코드 에디터 설치

Visual Studio Code(VS Code) 설치

VS Code 공식 내려받기 페이지(https://code.visualstudio.com/Download)에서 여러분 운영체제에 맞는 버전을 설치

이 에디터는 macOS, Windows, 리눅스를 모두 지원

 

VS code 확장 프로그램 설치

ESLint: 자바스크립트 문법 및 코드 스타일을 검사해주는 도구

React Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수 등 여러 함수를 사용할 때 단축 단어를 통해 코드를 자동으로 생성하는 코드 스니펫 모음, 제작자가 charalampos karypidis인 것을 설치

Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구

 

Korean Language Pack for Visual Studio Code: VScode 언어를 한국어로 설정하여 사용, VScode에서 F1을 누른 후  “Configure Display Language”를 입력 후 엔터, locale.json이라는 파일이 열리면 다음과 같이 locale 값을 ko로 설정한 뒤 VS Code를 재시작하면 에디터 언어가 한국어로 설정된다.

 

● Git 설치

프로젝트 버전을 관리하고 협업을 할 때 매우 핵심적인 역할

Git을 사용하여 앞으로 책에서 다룰 예제 코드를 직접 clone(사본 만들기)해서 참조

 

윈도우

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

Windows에서는 bash 에뮬레이터도 함께 설치. 앞으로 리액트 프로젝트를 진행할 때는 cmd 창보다는 bash 에뮬레이터를 사용할 것을 권유

(bash가 cmd보다 편하기도 하지만, 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하는 것이 좋다.)

 

● create-react-app으로 프로젝트 생성

리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구, 자유롭게 설정을 변경

터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행한다.

$ yarn create react-app hello-react  // yarn create react-app <프로젝트 이름> 명령어

명령어를 입력하면 설치가 완료

 

npm을 사용하는 경우

$ npm init react-app <프로젝트 이름>

프로젝트 생성이 완료되었다면 명령어를 입력하여 프로젝트 디렉터리로 이동, 리액트 전용 서버 구동

$ cd hello-react
$ yarn start //또는 npm start

 

브라우저에서 자동으로 리액트 페이지가 띄워짐, 페이지가 자동으로 띄워지지 않은 경우, Local 링크를 복사하여 주소에 넣어서 검색

http://localhost:3000/

---

4. Question 개념 정리 및 코드 문제

● 개념 복습 문제

1. 리액트는 구조가 MVC MVVM과 같은 구조와 다르게 (         )만 신경써서 작성하면 된다.

2. 리액트는 (           )(UI)를 만드는 데 사용한다. (           )라는 개념을 이용해 관리를 보다 쉽고 직관적으로 만들어 사용자 인터페이스를 동적으로 만들 수 있도록 도와준다. 

3. 웹페이지가 보여지는 과정을 작성: 렌더링 ➨ (       )  ➨  (       ) ➨  (       )

4. 리액트에서 뷰(View)를 업데이트 한다는 것은 리액트에서 (         )을/를 거친다고 표현한다.

5. 웹 브라우저에서 데이터 변화에 대해 DOM을 조작하면 시간 낭비 등 효율의 문제가 발생할 수 있어 리액트에서는 해결 방법으로  (      )을/를 사용하여 DOM의 업데이트 횟수를 최소화한다.

6. (         )는 뷰(View)가 어떻게 생겼고 데이터 변화에 대한 작동 정보에 대한 객체를 반환하며, 컴포넌트를 갈아끼우는 작업을 한다. 

7.리액트와 Virtual DOM은 업데이트 처리의 (        ), UI를 업데이트하는 과정에서 생기는 (        )을 모두 해소하고 더 쉽게 업데이트할 수 있는 기능을 제공한다.

 

● 코드 문제

1. yarn을 사용하여 react 프로젝트를 만드는 명령어를 작성하시오.

2. yarn을 사용하여 react 프로젝트를 실행하는 명령어를 작성하시오.

---

Corner React Starter #2

Editor 숨숨