카테고리 없음

리액트 Overview

taytay 2024. 11. 12. 13:30

2-1 리액트란?

  • 페이스북에서 만든 웹 UI를 작성하기 위한 자바스크립트 라이브러리

 

React의 특징

  • SPA의 단점을 보완하는 몇가지 기술을 도입
  • SPA의 단점
    • 모든 기능을 한 페이지에서 다 구현하다 보니 상태(데이터) 관리가 어려움
    • 자바스크립트에서 HTML 코드를 생성해야 하므로 개발 생산성 저하
    • 브라우저의 DOM을 자주 갱신하다보면 성능 저하 발생
  • SPA의 단점을 보완하는 React의 특징
    • 컴포넌트 별로 상태 관리가 가능하고 전역 수준의 상태 관리를 지원하는 서드파티 라이브러리가 많음
    • JSX를 이용해서 HTML 생산성이 높음
    • 가상 DOM을 이용해서 성능 저하 최소

 

컴포넌트 기반 개발

  • 화면의 일부 UI를 만드는 컴포넌트 단위로 개발
  • 컴포넌트는 자바스크립트로 개발하며 재사용성이 뛰어남

 

상태 관리와 단방향 데이터 바인딩

  • 각각의 컴포넌트 내부에서 상태 관리 기능 제공
  • 전역 수준의 상태 관리를 위한 라이브러리(Context API, Redux, MobX, Recoil, Zustand 등)를 사용할 수 있음
  • 상태가 변경되면 뷰(UI, HTML)를 즉시 렌더링
  • 단방향 데이터 바인딩: State -> View, View -> Event Handler -> setState() -> State : View의 변경이 직접 State를 변경시키지 않고 Event Handler를 통해서만 변경 가능하게 구현해야 하므로 상태가 변경되는 과정에 대한 예측과 추적이 용이함
  • ex) onChnage = {(event) => setValue(event.target.value)}

📌 Vue, Angular : 양방향 데이터 바인딩 방식의 프레임워크 (view가 바뀔 때 상태 state도 같이 바뀌는 것) => 상태 관리가 복잡

 

 

JSX (Javascript XML)

  • HTML 마크업과 비슷한 문법을 사용해서 UI 정의하면 Babel 같은 변환 도구에 의해 자바스크립트 코드로 변환됨
<div class="todolist">
  <ul>
    <li>두부</li>
    <li>계란</li>
    <li>라면</li>
  </ul>
</div>
/*#__PURE__*/_jsx("div", {
  class: "todolist",
  children: /*#__PURE__*/_jsxs("ul", {
    children: [/*#__PURE__*/_jsx("li", {
      children: "\uB450\uBD80"
    }), /*#__PURE__*/_jsx("li", {
      children: "\uACC4\uB780"
    }), /*#__PURE__*/_jsx("li", {
      children: "\uB77C\uBA74"
    })]
  })
});

 

가상 DOM (Virtual DOM)

  • 상태가 변경되어서 뷰를 렌더링할때 브라우저 DOM에 바로 적용하지 않고 브라우저 DOM과 유사한 트리구조의 가상 DOM(자바스크립트 객체)을 먼저 수정한 후 수정전의 가상 DOM과 수정후의 가상 DOM을 비교해서 바뀐 부분만 브라우저 DOM에 실제 반영

=> 이때, 가상 돔의 before와 after을 비교할 때, 특정 요소의 자식들(ex. <li></li>)의 고유한 key값을 기준으로 비교한다! 

바로 이 때문에 리스트 형태의 데이터를 출력할 때, key값을 쓰라고 경고창이 나오는 것.. 당장 출력하는 것에는 문제가 없지만, 나중에 유저가 브라우저와 상호작용을 하면서 리스트가 추가/수정/삭제될 때, 가상 돔을 사용해야 하는데, 만약 key값이 없으면 가상 돔을 비교할 수가 없어서 성능면에서 뒤떨어지게 될 수 밖에..😖

 

☑️ key값은 문서 전체에서 유니크하지 않아도 된다. 어차피 부모요소에 따라 구분되어 필터링되기 때문..

☑️ key값은 보통 

  • DOM API를 이용한 화면 갱신 방법
    1. 수정된 부분만 찾아서 갱신
      • 장점: 화면 렌더링을 최소화 하기 때문에 성능에 좋음
      • 단점: 기존 데이터와 새로운 데이터를 비교해서 새로운 데이터가 기존 데이터의 어느 부분과 달라졌는지 확인하고 해당 요소를 DOM에서 찾아 갱신해야 하므로 코드가 복잡해짐
    2. 관련 영역 전체를 갱신
      • 장점: 기존 요소를 지우고 새로운 데이터로 전체를 교체하면 되므로 기존 데이터와 비교 작업이 필요 없고 수정될 부분만 찾아서 DOM을 갱신할 필요가 없으므로 코드가 간결해짐
      • 단점: 하나만 수정해서 갱신하면 될 것을 관련 영역 전체를 다시 렌더링 하므로 성능 이슈 발생
    3. ⭐️⭐️가상 DOM 이용 (React는 위의 두 가지 방법의 장점을 조합해 만든 방법 사용!)⭐️⭐️
      • 새로운 데이터를 가지고 만들어진 가상 DOM과 기존 DOM을 비교해서 바뀐 부분만 찾아서 브라우저 DOM을 갱신하므로 성능에 좋음
      • 바뀐 부분만 찾아서 리렌더링 하는 작업은 리액트가 담당하므로 코드가 간결해짐

 

2-2 리액트 개발 환경 구축

툴체인

  • 리액트 앱을 개발할 때 필요한 개발 환경을 자동으로 구축 해주는 도구
    • 보일러 플레이트 코드 제공
    • 프로젝트 설정 파일 자동 구성
    • 필요 라이브러리 설치
    • HMR(Hot Module Replacement): 개발시 소스 코드를 수정하면 컴포넌트를 자동으로 리로딩해서 브라우저의 새로고침 없이 곧바로 화면에 적용 가능
    • 프로덕션 배포에 필요한 번들링 기능 제공

 

1) create-react-app(CRA)

  • 리액트 개발팀에서 만든 리액트 전용 툴체인
  • workspace/ch02-start 폴더로 이동 후 다음 명령 실행
  • Need to install the following packages 메세지가 나오면 y 입력후 엔
npx create-react-app cra
# 생성한 프로젝트 폴더로 이동
cd cra
# 개발 서버 실행
npm start

 

2) Vite

  • 프랑스어로 “빠르다”는 뜻
  • Webpack을 번들러로 사용하는 CRA 대비 Esbuild와 Rollup을 번들러로 사용하면서 10~100배 빠른 속도로 개발 서버 구동
  • CRA는 리액트만 지원하는 반면 Vite는 Vanilla JS, React, Svelte, Solid 등의 다양한 SPA 개발 환경을 지원
  • workspace/ch02-start 폴더로 이동 후 다음 명령 실행
npm init vite@latest

> 프로젝트 명: vite
> 개발환경 선택: React
> 개발언어 선택: JavaScript

# 생성한 프로젝트 폴더로 이동
cd vite
# 필요 패키지 설치
npm i
# 개발 서버 실행
npm run dev

 

 

2-3 리액트 애플리케이션 배포

프로젝트 빌드

  • 프로덕션 배포용 파일 생성(cra나 dist 둘 다 아래 명령어 실행) 
    npm run build
  • 프로젝트 빌드
    • build(CRA는 build 폴더 생성), dist(Vite는 dist 폴더 생성) 폴더에 프로덕션 배포용 파일(우리가 작성한 raw file이 아닌, 압축/번들링/트랜스파일링 거친 파일) 생성
    • JSX 문법을 Javascript 코드로 변환
    • 트랜스파일링: ES6+ 문법을 지원하지 않는 구 버전의 브라우저를 위해 ES5 수준의 코드로 변환
    • 압축: 주석 제거, 변수명 축약, 화이트 스페이스 제거
    • 번들링: 여러 자바스크립트 파일을 하나 또는 몇개의 파일로 묶는 작업 (Webpack(CRA), Rollup, Parcel, Esbuild(Vite) 등)
    • 트리 쉐이킹: 번들링 과정에서 불필요한 코드(사용하지 않는 함수나 모듈)를 식별하고 제거
    • css 파일도 번들링, 압축됨

 

빌드된 파일로 서버 실행

  •  CRA : vite와 다르게, ~~~해주는 게 없어서, serve라는 node.js 모듈을 사용하여 서버를 실행해야 한다. 
  • npx serve -s build // cra(루트 - package.json 존재하는 위치)에서 실행

npx serve -s . // build 파일 안에서 실행
  • Vite 
    npm run preview
  • serve의 -s 옵션: 리액트는 index.html 파일 하나에서 모든 페이지를 서비스하므로 클라이언트가 요청한 모든 URL에 대해서 index.html을 응답함