[KDT 리액트] 리액트란? 1

리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 

 

 

프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있고,

라이브러리는 어떤 특정 기능을 모듈화 해놓은 것으로

프레임워크는 여러 라이브러리들 포함하고 있는 더 큰 범위이다.

 

리액트는 프레임워크가 아닌 라이브러리라고 보는 이유는, 전적으로 UI를 렌더링하는 데 관여하기 때문이다.

cf. 앵귤러(Angular)와 뷰(Vue)는 프레임워크

 

리액트는 함께 사용될만한 라이브러리들이 잘 마련되어있는, 즉 리액트의 생태계가 잘 갖춰져있다.

예를 들면,

라우팅(페이지 이동)을 위한 라이브러리 react-router-dom이라든지 

상태 관리를 위한 라이브러리들 redux, recoil, mobx라든지

빌드를 위한 webpack, npm이라든지

테스트를 위한 Eslint, Jest, Mocha 등의 라이브러리를 이용한다.

 

 

 

 

 

리액트 컴포넌트란 무엇인가?

리액트로 만들어진 앱을 이루는 최소한의 단위로, 리액트는 여러 컴포넌트를 이용해 웹 앱을 개발한다.

리액트로 만들어진 웹 앱은 여러 개의 컴포넌트으로 구성되어 있다.

ex) 인스타그램 - 검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스트 컴포넌트(이 모두 주관적인 구성)

 

 

컴포넌트 두 가지 종류

클래스형 컴포넌트(생명주기 사용 가능) / 함수형 컴포넌트(훅스 Hooks 등장 이후 활발히 사용됨)

 

 

 

 

 

브라우저에서 보여지는 웹 페이지를 이루고 있는 것은 HTML 요소들인데,

이 요소들을 자바스크립트가 사용할 수 있도록 브라우저가 트리구조로 만든 객체 모델을 돔(Document Object Model)이라고 한다. 이 DOM 트리는 DOM에서 제공해주는 API를 통해 조작할 수 있게 된다. 

 

 

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기까지 여런 단계가 있는데, 

웹 브라우저가 HTML 문서를 읽고, 스타일을 적용하고 뷰포트에 표시하는 과정을 웹 페이지 빌드 과정(Critical  Rendering Path)이라고 한다. 

 

 

DOM tree 생성 :  렌더 엔진이 문서를 읽어 들여 파싱하고 어떤 내용을 페이지에 렌더링할 지 결정하는 DOM tree 생성

=> Render tree 생성 : 브라우저가 DOM과 CSSOM(CSS Object Model)을 결합하여, 화면에 보이는 모든 컨텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력한다. 즉, 화면에 표시되는 모든 노드의 컨텐츠 및 스타일 정보를 포함하는 Render tree 생성 

=> Layout(reflow) : 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계 

=> Paint : 실제 화면에 그리기

 

 

사용자와의 상호 작용으로 DOM에 변화가 생기면 그 때마다 Render tree가 재생성되고, 그 뒷 단계인 Layout과 Paint 과정도 다시 거치게 되며, 특별히 이 두 단계는 많은 조작 비용을 들게 해 성능 상의 문제와 연결되는 단계이다 ! 

 

 

이러한 배경에서 리액트에 가상(Virtual) 돔 개념이 도입된 것이다.

가상 돔이란 실제 돔을 메모리에 복사해둔 것으로, 자바스크립트 객체 형태로 메모리 안에 저장해두는데,

렌더링 이전의 객체(가상돔)와 렌더링 이후의 객체(가상돔)를 저장하여 둘의 차이를 비교하여 바뀐 부분이 어느 곳인지 

찾아서(Diffing), 바뀐 부분만 실제 돔에 적용시키는 재조정(reconciliation) 과정을 거쳐 작동하는 것이다 !

재조정 과정이란, 실제 돔에 대한 가상 돔 상태를 유지하고 변화가 생 여러 개의 State를 한꺼번에 업데이트(setState)해줘서 화면이 한 번만 다시 그려지게 하는 배치 업데이트와의 동기화를 유지하는 것을 말한다. 

 

 

 

원래는 Webpack이나 Babel 같은 모듈을 설치하고 설정해서 리액트 앱을 시작했었다.

 

cf. 웹팩 : 오픈 소스 자바스크립트 모듈 번들러로, 여러 개로 나뉘어 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화해주는 라이브러리 => 로딩에 대한 네트워크 비용을 줄일 수 있게 된다 ! & 모듈 단위로 개발이 가능하여 가독성을 높이고, 유지보수가 쉽다 !

바벨 : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있도록 변환시켜주는 라이브러리

 

 

하지만, 리액트 앱 설치 방법으로 요즘 주로 사용되는 방법은 Create React App을 이용해서 설치하는 것이다.

이유는 개발에 필요한 Babel이나 Webpack 등의 다양한 설정들이 이미 다 되어있기 때문에 빠르고 손쉽게 리액트 앱을 시작할 수 있어서이다.

npx create-react-app <작업 폴더명>

 

 

Create React App 공식문서

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

 

 

 

 

 

 

create-react-app을 실행하면 위와 같이 여러 폴더와 파일이 자동적으로 생성되는 것을 확인할 수 있다.

 

 

public 폴더와 src 폴더 안을 보면 다음과 같은 파일들이 들어있는 것을 볼 수 있다.

 

public 폴더 안의 index.html은 화면에서 보여지는 부분 페이지 템플릿이고,

src 폴더 안의 index.js는 자바스크립트의 시작점으로

이 두 파일은 이름을 변경해서 사용하면 안된다 !! 

 

cf. public 폴더 안의 파일들은 public 폴더 안의 index.html에서만 사용할 수 있다 !

 

 

src 폴더는 웹팩이 작동하여 이 폴더 안의 여러 파일들을 번들링(최적화)해주게 된다. (즉, 웹팩은 src 폴더 안의 파일들만 처리한다 !) 대부분의 리액트 소스 코드들은 이 곳에 작성하면 된다. CSS 파일과 JS 파일은 여기에 넣어준다.

 

 

package.json 파일에는 프로젝트 이름(name), 버전(version), 필요한 라이브러리와 그 버전(dependencies) 등의 해당 프로젝트의 정보들이 담겨있다. 

앱을 시작할 때 사용할 스크립트, 앱을 빌드하거나 테스트할 때 사용할 스크립트들을 명시할 수 있다. 그리고 자주 실행해야 하는 명령어를 스크립트로 작성해두면 npm 명령어로 실행할 수 있게 된다.(scripts)

소스 코드를 입력할 때 문법이나 코드 포맷을 확인해주는 eslint 설정을 명시하기도 한다.(eslintConfig)

cf. 소규모의 개인 프로젝트는 괜찮지만, 팀 단위의프로젝트에서는 package.json 파일에서 ESLint 설정하는 것은 권장되지 않는다. 한 파일에 여러 다른 메타 정보를 섞어 놓으면 프로젝트가 커질수록 유지보수하는 데에 있어 파악이 어렵기 때문이다. 

 

<package.json 파일 내부>

 

 

 

그 외, App.test.js는 앱을 테스트 케이스를 이용해서 안전성 등의 부분을 테스트하기 위해 테스트 케이스를 작성하는 파일.

 

 

 

 

 

React App 실행하기 위해,

npm run start

 

 

 

 

원래 리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 엘리먼트를 생성한 후(객체) 이 엘리먼트를 In-Memory에 저장하고, ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그리게 된다. 

 

ex) <h1> I use just HTML </h1>

=> const myElement = React.createElement('h1', {}, ' I use just HTML ');

=> ReactDOM.render(myElement, document.getElementById('root'));

 

 

하지만, JSX(JS+HTML과 유사한)를 사용하면 바벨이 내부에서 자동으로 위와 같은 형식으로 바꿔줌 !

즉, JSX는 바벨을 통하여 변환되어 createElement를 사용하지 않고도 컴포넌트를 만들 수 있게 해주는 것이다.

단 JSX를 사용하면서 주의해야할 문법적 규칙으로는 컴포넌트 생성시 여러 엘리멘트 요소가 있을 경우, 

반드시 부모 요소 하나로 그것들을 감싸줘야 한다 ! 감싸는 용도의 요소는 <React.Fragment></React.Fragment>를 이용하면 나타날 필요가 없는 <div></div>없이 HTML이 작성된다. 간단히로는 <> </>로 감쌀 수도 있어 주로 이런 식으로 작성된다.