떠오르는 프론트엔드 기술 스택으로는
React, Vue.js, Angular 가 있다.
각 기술의 특징은 아래와 같다.
리액트 :
메타 / 라이브러리 / JS / Virtual DOM / 단방향 데이터 바운딩
Vue.js :
개인 / 프레임워크 / JS / Virtual DOM / 양방향 데이터 바운딩
Angular :
구글 / 프레임워크 / TS / Incremental DOM / 양방향 데이터 바인딩
(프레임워크의 특징 : 낮은 자유도, BUT 개발에 집중할 수 있다.)
(라이브러리의 특징 : 높은 자유도, BUT 여러가지 라이브러리들의 특성들을 하나하나 학습해야 하는 부담이 있다.)
React 란? : 화면을 효율적으로 렌더링 하는데 특화된 라이브러리
DOM ?
브라우저는 서버로부터 전달받은 html 파일을 분석하여 화면을 표시한다.
이러한 html element 하나하나를 트리형태로 표현한 것을 DOM (Document Object Model) 이라고 한다.
DOM - html 엘리먼트를 하나하나 트리형태로 표현한 것
getElementbyId
queryselector
같은 API를 통해 돔의 구조를 많이 조작하고 변경한다.
CRP (Critical Rendering Path) : 웹페이지 렌더링 과정
html 문서를 파싱해서 돔트리를 만들고, 스타일 시트를 파싱해서 스타일 규칙을 생성
html 파서가 div 를 찾고
해당 div 를 제거하고 새로운 div 를 렌더링하는 과정을 겪는다.
이러한 CRP 과정이 한번만 발생시엔 큰 문제가 없는데, 이게 여러번 되면 상당히 무거운 작업이 될 수 있고, 이 작업을 통해 화면을 그리는데 느리게 동작하는 원인이 될 수 있다.
이 문제 해결을 위해서 가상돔을 사용한다.
Virtual DOM :
실제 리얼 돔을 복사한 복사본이다.
JS 객체로 메모리 안에 보관된다.
이러한 가상돔으로 렌더링 문제를 어떻게 해결하였는가?
React 는 화면이 변경되기 전에 가상돔을 보관을 하고 있고,
화면이 업데이트 된 이후에 화면에 나타나게 될 가상돔을 또 생성을 한다.
이렇게 렌더링 전에 화면의 내용을 담고 있는 첫 번째 가상돔에 업데이트가 발생한 두번째 가상돔을 비교해서 어떤 엘리먼트가 변했는지를 비교한다.
리액트에서 이러한 비교 과정을 디핑 Diffing 이라고 표현한다.
이 차이가 발생한 부분을 실제 돔에 적용을 한다.
이 과정을 Reconciliation 이라고 한다.
일반적과 이러한 과정의 차이
배치 업데이트를 하는 부분에서의 차이가 있다.
일반적으로 엘리먼트들이 바뀌었을 때
자바스크립트는 하나하나 돔을 수정하면서 렌더링 과정을 한다.
Virtual Dom 은 배치 업데이트를 하면 변경된 내용을 그룹화 시켜서 한번만에 렌더링을 하게 해주는 기법이다.
돔 조작에 비용이 가장 많이 발생하는게, 화면을 그려주고 파싱하는 부분인데, VirtualDOM 덕분에 이러한 비용을 획기적으로 개선할 수 있다.
실제로 Js JQuery React의 렌더링을 비교해보면,
렌더링의 속도 차이는 유 의미 하다.
MPA : MultiPageApplication
과거 웹 사이트에서는 동적인 페이지도 없고 페이지 용량도 가벼웠다.
사용자의 클릭과 같은 인터랙션이 발생할 때 마다 서버로부터 새로운 html을 받아와서 화면에 렌더링 하는 구성방식
메뉴를 이동할 때 마다 페이지를 리로딩 하는 방식
요즘에는 사용자와의 인터랙션이 자주 발생한다. 그래서 매번 페이지 이동마다 페이지 리소스를 가져오는 로딩 시간이 필요하고 화면이 깜빡이는 사용자 경험을 제공하게 한다
SPA : SinglePageApplication
인터렉션 과정이 많이 일어나는 서비스들이 생기면서,
깜빡임 없이 부드럽게 이동하는 그런 사이트들이 필요하게 되었다.
그러한 방식을 개선하기 위해서 spa 라는 구축방식이 나왔다
리액트는 이런 spa 라는 구축 방식을 기본으로 제공한다.
모든 정적 리소스를 최초 구동시 한번만 다운로드 하고
새로운 페이지 요청시 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신하는 방식이다.
실제 이니셜라이져 될 때 html을 한번만 서버로 요청한다.
그 이후에 화면에 그려지는 필요한 데이터들은
새로운 페이지 요청시 화면 전체를 랜더링 하지 않고 변경된 부분만 갱신하여 좋은 효율을 가져올 수 있다.
화면이 깜빡이지 않고 화면이 빠르게 전환된다.
트래픽이 감소하고 속도나 반응성이 향상된다.
깜빡임 없이 자연스러운 사용자 경험을 제공하는 큰 장점이 있다.
리액트 컴포넌트
컴포넌트 : 앱을 이루는 최소한의 단위
리액트는 여러 컴포넌트 조각으로 구성되어 있다.
컨텐츠의 내용은 다르지만, 구성이 동일한 내용을 모두 컴포넌트화 할 수 있다.
장점 : 코드 재사용성, 빠른 개발, 일관성 유지, 유지관리 용이성
페이지, 버튼, 테이블 같은 자주사용하는 내용을 분리할 수 있다.
반복적인 개발이 줄어들고
기능별로 업무를 나눌 수 있어 빠른 개발을 도와준다.
동일한 컴포넌트를 가져와서 사용하는 구조여서, 일관성을 확보할 수 있다.
특정 버그나 버그 수정, 기능확장을 위해서 한 컴포넌트만 수정하면 되기 때문에 유지관리에 용이하다.
리액트 컴포넌트
리액트의 컴포넌트에는 함수형 컴포넌트 / 클래스형 컴포넌트 두가지가 있다.
함수형은 클래스형에 비해 만드는데 간편하다.
클래스형은 복잡하고 로직 재사용에 어려움이 있다.
클래스형은 함수형에 비해 메모리 사용량이 높고, 빌드된 결과물의 크기도 더 크다
이러한 단점에도 불구하고 state와 LifeSycle API 를 사용할 수 있다는 장점으로 많이 사용됨..
BUT 리액트 16.8 이상에서 훅 기능 도입으로 인해, 함수형에서도 처리 가능, 리액트 팀에서도 함수형 컴포넌트 사용을 권장한다.
JSX
JS에 XML 을 추가하여 확장한 문법이다,
JSX 는 엘리먼트를 생성한다.
React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체 이다.
React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI 관련 작업을 할 수 있기 때문에, 시각적으로 더 도움이 된다.
JSX를 사용하면 React 가 더 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해준다.
React Hook
hook 은 함수형 컴포넌트에서 상태관리와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
(class 형 컴포넌트 안에서는 동작하지 않음)
useState / useEffect / useCallback과 같은 훅들이 자주 사용된다
useState
리액트의 상태를 관리하는 함수 (Hook)
선언할 때 변수명과 변수를 업데이트하는 set 함수를 같이 선언을 한다.
실제 선언한 이 변수는 set 함수를 통해서만 변경할 수 있다.
useEffect
리액트의 컴포넌트가 렌더링을 마치고 무조건 호출되는 함수
상태가 바뀔 때마다 컴포넌트는 리렌더링 이라는 과정을 거친다.
useEffect 는 리렌더링 될 때는 찍히지 않고, 최초 렌더링 될 때만 호출되는 함수이다.
특정 상태가 변경되었을 때마다 호출되게 하고싶으면, 변경되는 참조할 값을 대괄호 [] 안에 넣으면 된다.
많이 하는 실수 중에 하나가 : 데이터 API GET 할 때 무한으로 Get 요청을 보내는 것이다. 이를 해결할 때 이 useEffect 를 자주 사용한다.
useEffect 끝단의 대괄호를 비워두면 무한으로 호출되는 현상을 막을 수 있다.
useCallback
상태가 변동할 때, useCallback 은 최초 값만 가지고 있다.
렌더링 할 때 딱 한번만 정의할 수 있게 도와준다.
리렌더링시 함수를 매번 재정의 하지 않고 딱 한번만 정의할 수 있는 기능을 제공한다.
useEffect 처럼 특정 값의 상태가 바뀌었을 때만 재정의 할 수 있도록 하려면 [] 대괄호 안에 해당 상태를 넣으면 된다.
React 앱 생성과 구조
create-react-app 하면
보일러 플레이트라고 해서 기본적인 구조의 파일들을 자동으로 생성해준다.
index.html 에는 id 값이 root 인 div 하나만 존재한다.
index.js 에서 root id 를 찾고 가상돔을 만들어서, App이라는 컴포넌트를 렌더링한다.
App.js 가 화면에 실제로 보여지는 내용이다.
