고정 헤더 영역
상세 컨텐츠
본문
728x90
혹시 웹페이지를 만들어본 경험이 있나요.
혹은 웹 페이지를 만들면서, 수많은 html 태그와 복잡한 항목을 코딩하기에 지쳐본 경험이 있나요.
여기 이 복잡함에 염증을 느껴 그 해결책으로 React를 이용했고, 이를 계기로 '웹 개발' 영역에 터를 잡은 사람이 있습니다. 저자 김민준은 자신이 좋아하는 리액트를 더 많은 사람들이 쉽고 편하게 배우기를 바라면서 한 권의 책을 집필합니다.
리액트를 다루는 기술 - 교보문고
입문부터 대규모 애플리케이션까지 한 권으로 | 리액트 베스트셀러 1위리액트, 현장 밀착 입문서는 따로 있다!자바스크립트의 기본 기능과 문법을 숙지한다리액트의 기본기를 익히려면 자바스
www.kyobobook.co.kr
책 [리액트를 다루는 기술]은 리액트를 처음 다루는 사람부터 백엔드를 처음 시작하는 사람에게까지, 초심자에게 초점을 맞춘 책입니다.
본 책을 읽고, 각 장별로 실습과 개념을 익히는 과정을 포스팅해 보려 합니다.
1장 : 리액트 시작
1장에서는 리액트를 이용해야 하는 필요성과 특징 및 장단점, 그리고 원활한 실습을 위한 작업 환경을 설정하는 방법에 대해 다룹니다.
1.1. 왜 리액트인가?
IT 업계는 끊임없이 발전합니다.
이는 계속해서 문제점을 발견한다는 뜻이고, 더 나은 해결책과 효율성을 추구한다는 의미입니다.
최근 웹 애플리케이션 제작에 있어서, 자바스크립트가 핵심적인 역할로 손꼽히고 있습니다. 서버사이드, 모바일, 데스크톱 애플리케이션 등 다양한 곳에서 이용됩니다. 이처럼 자바스크립트 만으로 규모가 거대한 앱을 만들 수 있게 되었습니다.
그렇다면, 이러한 커다란 규모의, 특히 프런트 엔드 사이드의 앱 구조 관리를 효율적으로 하는 방법은 무엇일까요.
그 해결책은 프레임워크입니다. MVC 아키텍처, MVVM 아키텍처, MVW 아키텍처가 그 예시입니다.
MVC 아키텍처
Model-View-Controller의 약자로 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 구현이 쉽고 간단하다는 장점이 있지만, 컨트롤러가 안드로이드 API에 깊게 개입되어 있고, 애플리케이션이 커지면 유지 보수가 어렵다.
MVVM 아키텍처
Model-View-ViewModel의 약자로 MVC의 문제점이었던 모델과 뷰의 의존성을 제거한 아키텍처이다. 큰 프로젝트도 더 관리하기 쉽다는 장점이 있다. viewmodel의 설계가 쉽지 않다는 단점이 있다.
아래의 링크를 통해 MVVM에 대해 자세히 알아볼 수 있습니다.
MVW 아키텍처
Model-View-Whatever을 의미한다. 마지막 whatever은 말 그대로 무엇이든-controller, viewmodel 등이 올 수 있다.
(아키텍처 자체에 대한 설명은 아래의 링크를 참고하길 바랍니다.)
The Clean Architecture
이 문서는 로버트 C. 마틴의 The Clean Architecture를 한국어로 번역한 문서입니다. 그의 좋은 의도와 생각이 널리 전파되길 바랍니다
blog.coderifleman.com
이 아키텍처들의 공통점은 바로 모델과 뷰가 있다는 점입니다.
모델 (model)
앱 데이터 관리 영역. 컨트롤러에 의해 데이터가 조회되는 영역.
뷰(View)
사용자의 활동 영역. 사용자의 요청에 따라 변형되는 영역.
웹은 시간이 지나 발전할수록 많은 업데이트 항목을 만드는데, 앱 규모가 커질수록 업데이트 영역의 규칙을 정하는 작업은 더욱 복잡해집니다.
이러한 문제를 해결하는 방법으로, 데이터가 바뀔 때마다 기존 뷰를 모두 삭제하고 처음부터 다시 새로 렌더링 하는 방법이 있습니다. 이를 통해서 앱 구조의 단순화와 작성 코드 양을 감소시킬 수 있고, 변화를 줄 방법에 대한 고민 등이 사라집니다. 이것이 바로, 최대한 성능을 아끼고 편안한 사용자 경험을 구현하고자 개발한 것-리액트입니다.
리액트
자바스크립트 라이브러리이다. 오직 사용자 인터페이스-뷰를 만드는 데 사용한다.
리액트 프로젝트에서 컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체입니다. HTML 태그를 문자열로 반환하는 템플릿과 다른 개념입니다.
컴포넌트
재사용이 가능한 API로, 수많은 기능을 내장해 하나의 컴포넌트에서 생김새와 작동 방식을 정의한다.
템플릿
프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 것이다.
렌더링은 사용자 화면에 뷰를 보여주는 것을 의미하는데, render() 함수 등을 이용해 맨 처음 어떻게 화면을 보일지 정하는 것을 초기 렌더링이라 합니다. 컴포넌트 생김새를 정의하는 render 함수는 객체를 반환하며, 내부에 또 다른 컴포넌트 포함할 수 있습니다.
렌더링
리액트 라이브러리에서 데이터 변환이 일어날 때마다 새로 렌더링 한다. 컴퓨터 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있다는 장점이 있다.
초기 렌더링의 단계를 표현하면 다음과 같습니다 :
render 함수의 실행 ( 컴포넌트의 재귀적 렌더링)
> (1) HTML 마크업 생성(문자열 형태)
> (2) DOM 요소(만들려는 실제 페이지) 주입
> 문서
도움이 되길 바라면서, 렌더링 과정에 대한 설명 영상을 첨부합니다.
위의 영상은 교재의 1장이 설명하는 것보다 더욱 세밀한 설명을 덧붙여 설명하고 있습니다.
간략히 요약하면,
|
- html 구조에서 dom 구조로 변화 과정
: 웹페이지(웹브라우저에 표시하고 싶은 내용) = document(편집 가능한 문서)
-> API (브라우저에서 편집 가능한 문서) = DOM
- 컴포넌트와 엘리먼트
: 엘리먼트 = 컴포넌트와 html 태그를 구성하는 것.
- reconciliation
- rendering
컴포넌트 > 컴포넌트 인스턴스 생성 > 엘리먼트 생성 --> dom (react dom은 react 라이브러리에서 오지 않는다. 리액트의 역할은 html을 생성하는 것이 아니라, dipping-겉 구조 구축이다. v.13~14쯤에서 두 개는 서로 분리되었다. )
- react fiber
: 사실상 진짜 rendering 과정이 일어나는 단계. 최근에 나온 비교적 최신 라이브러리.
|
리랜더링 - 조화 과정은 간단히 말해 업데이트를 거치는 것, 즉 컴포넌트의 데이터가 변경되었을 경우 새로운 요소로 갈아 끼우는 과정을 말합니다.
render() 함수는 여기에서도 쓰이는데, 이전에 이 함수가 만들었던 컴포넌트 정보와, 업데이트 이후 새롭게 이 함수가 만든 컴포넌트 정보를 비교합니다. 이 두 가지 뷰를 자바스크립트를 통해 최소한의 연산으로 비교한 후, 그 차이를 마찬가지로 최소한의 연산으로 DOM 트리에 업데이트합니다.
때문에 전체 컴포넌트를 처음부터 렌더링 하는 것처럼 보이지만, 사실 최적의 자원을 사용(최소한의 연산 등) 하여 렌더링 합니다.
1.2. 리액트의 특징
- Virtual DOM 사용
: DOM 자체는 정적이기에, 동적 UI에 최적화되어있지 않다는 문제점이 있습니다. 자바스크립트를 사용해 정적인 DOM을 동적으로 만들 수 있지만, 규모가 큰 웹 애플리케이션에서 이러한 방식을 이용한다면 느려진다는 단점이 있습니다.
DOM
document object model. 객체로 문서 구조를 표현하는 방법으로, XML/HTML으로 작성한다.
트리 형태-특정 노드 탐색/수정/삽입 가능-이다.
이 단점을 해결하기 위해서는, DOM을 최소한으로 조작해 작업을 처리하는 방법-Virtual DOM 방식을 사용해야 합니다. 실제 DOM이 아니라, 가상 DOM과 같은 자바스크립트 객체를 구성해 사용하는 방법입니다.
그 절차는 다음과 같습니다 :
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리랜더링 합니다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
- 바뀐 부분만 실제 DOM에 적용합니다.
'리랜더링-조화과정 설명에서 말한 '새로운 DOM 트리'가 Virtual DOM입니다.
- 대규모 애플리케이션과 지속적인 데이터의 변화
: 지금까지의 내용을 조합하면, 리액트는 커다란 두 개의 문제점에 대한 해결책으로 볼 수 있습니다.
대규모 애플리케이션과 지속적인 데이터의 변화입니다.
이 두 가지를 만족하는 적절한 곳에서 Virual DOM을 이용하는 리액트는 빠른 성능을 보일 수 있습니다. 다시 말해 모든 상황에서-(정적인 페이지 등) 나은 성능을 보이지는 않습니다.
- 업데이트 처리 간결성
: 모든 상황에서 리액트와 Virtual DOM이 제공하는 것은 업데이트 처리 간결성입니다.
- 뷰 담당
: 리액트는 오직 뷰만 신경 쓰는 라이브러리입니다. 때문에 Ajax, 데이터 모델링, 라우팅 등의 기능을 원하면 직접 구현해야 합니다.
- 자신의 취향에 맞는 스택 설정 - 여러 라이브러리를 접하기
- 다른 웹 프레임 워크나 라이브러리와의 혼용
1.3. 작업 환경 설정
리액트 프로젝트를 만들기 위해서는 몇 가지 단계를 통한 준비가 필요합니다. :
(1) Node.js 설치
> (2) npm / yarn 설치
> (3) 코드 에디터 설치
> (4) git 설치
> (5)'create-react-app'으로 프로젝트 만들기
책에서는 mac OS와 Ubuntu의 설치 방법도 설명하지만 필자의 컴퓨터는 window이기에 window의 사례만 소개하겠습니다. 또한 명령 프롬 포트를 통한 설치와 버전 확인이 아래의 과정에서 필요되기도 합니다.
(1) Node.js의 설치
윈도우 사용자는 아래의 사이트에서 node.js - lts 버전을 다운로드합니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js (LTS 버전)
크롬 V8 자바스크립트 엔진으로 만든 자바스크립트 런타임이다. 웹 브라우저가 아닌 환경에서도 자바스크립트 연산을 가능하게 한다. 리액트 애플리케이션은 웹 브라우저에서 실행되기에 이를 설치할 필요가 있다.
(2) npm 혹은 yarn 다운로드
npm
Node.js의 패키지 매니저 도구이다. 현재 82만 개의 패키지가 등록되어 있다.
리액트 프로젝트를 개발하는 데 필요한 도구의 종류로는 바벨(ECMAS Script6 호환), 웹 팩(모듈화 된 코드 합치기와 수정 시 웹 브라우저 리로딩) 등이 있습니다.
yarn은 npm보다 더 빠르고 효율적인 캐시 시스템과 부가 기능을 제공합니다.
$ npm install --global yarn
위의 코드를 명령 프롬프트에 입력해 yarn을 설치할 수 있습니다.
(3) 코드 에디터 설치
본 교재에서는 Visual Studio Code를 편집기로 이용합니다. 아래의 사이트에서 윈도우 버전을 다운로드할 수 있습니다.
(* Visual Studio Code는 Visual Studio와 다른 프로그램입니다.)
다양한 확장 프로그램을 통해서 개발의 편의성을 증진시킬 수 있습니다.
ESLit, Reactjs Code Snippets, Prettier-Code formatter, 한글 언어 확장 프로그램 설치 등이 있습니다.
(4) git 설치
Git
형상관리 도구로 프로젝트 버전 관리와 협업 시 핵심 역할을 수행합니다. 개발자에게 매우 중요합니다.
윈도우의 사용자라면 아래의 사이트에서 git을 다운로드할 수 있습니다.
Git - Downloads
Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp
git-scm.com
(5) create-react-app으로 프로젝트 생성하기
프로젝트를 만들고 싶은 파일 위치에서 터미널을 열어, 원하는 프로젝트 명과 함께 create-react-app 명령어를 입력하면 프로젝트를 생성할 수 있습니다.
create-react-app
웹 팩과 바벨의 설치 및 설정 과정을 생략하고 바로 빠르게 프로젝트 작업환경을 구축해 주는 도구입니다.
$ yarn create react-app hello-reactyarn이라는 툴을 이용하여 create-react-app을 통해 프로젝트 작업환경을 구축하는데, 해당 프로젝트 이름을 hello-react으로 설정했다는 뜻입니다.
(* 무언가 설치 중이라는 명령어가 아니라, 어딘가 버그가 발생했다는 화면이 나올 때도 있습니다.
그럴 때에는 'exit()'명령어를 입력해 원활한 설치를 이어갈 수 있습니다.)
이렇게 프로젝트를 생성했다면, 아래의 명령어를 입력해 리액트 개발 전용 서버를 구동하면 됩니다.
$cd hello-react //hello-ract 폴더로 이동
$yarn start // 혹은 npm start 명령어를 통해 서버 실행
이후 자동으로 아래의 사진과 같은 리액트 웹 페이지가 띄워집니다.
(http://localhost:3000/ 주소를 입력도 가능합니다.)
이 브라우저를 확인할 수 있다면, 당신은 리액트를 다룰 소프트웨어적 준비가 끝났습니다.!~!
Corner React1
Editor: 라마
728x90
'22-23 > 22-23 리액트 스타터 1' 카테고리의 다른 글
| [리액트 스타터 1] 3장. 컴포넌트 (0) | 2022.10.06 |
|---|---|
| [리액트 스타터 1] 2장. JSX (1) | 2022.09.29 |
| [codecademy JavaScript] 9장. Objects (0) | 2022.09.22 |
| [codecademy JavaScript] 8장. lterators (0) | 2022.09.22 |
| [codecademy JavaScript] 7장. Loops (0) | 2022.09.22 |
