React

React란?

React

• 2013년 페이스북에서 발표한 JavaScript UI Library
• 개별 코드 조각(component)들로 유저 인터페이스를 구성하는 도구
• 컴포넌트 결합 → 큰 page, app 구성

라이브러리 vs 프레임워크

• 소프트웨어 개발을 돕는 도구

	라이브러리	프레임워크
제어권	개발자	프레임워크
	단순 활용 가능한 도구들의 집합	만들어진 뼈대에 비즈니스 로직만 추가
	우리가 원하는 내용 선택 가능	제공해준 환경과 도구만 사용
장점	유연성, 선택의 폭 넓혀줌	코드 통일성, 유지관리 용이성
ex.	React, Redux, Material UI, react-router-dom	Spring, Angular, vue

React 이해하기

싱글 페이지 애플리케이션 (SPA)

• SPA vs. MPA (이전 방식)

  Single Page Application	Multiple Page Application
  단 한 개의 페이지만으로 구성	여러 개의 웹페이지로 구성
  CSR	SSR
  모든 정적 리소스를 최초 한 번만 다운로드하여 렌더링 → 이후 필요한 데이터만 갱신 (리렌더링)	요청 시, 서버로부터 HTML 그대로 내려받아 매번 전체 페이지 리렌더링
  초기 구동 속도 느림	첫 로딩 매우 짧음
  리로딩 (새로고침) 발생 X	페이지마다 리로딩 발생 → 플래시 현상
  SEO 매우 어려움	SEO 유리

• 장점
  • 새로운 페이지 요청 시 전체 렌더링X → 필요한 부분만 갱신
  • 페이지 이동이 있어도 새로고침 X → 자연스러운 UX 제공
• 단점
  • 비교적 긴 최초 로딩 시간
  • SEO 매우 어려움
  • 파일 사이즈 커질 수 있음 → 유저가 실제로 방문하지 않는 스크립트도 불러오기 때문에 (Code Splitting)
    

Client Side Rendering (CSR)

• 웹페이지의 콘텐츠가 사용자의 브라우저에서 동적으로 생성되어 렌더링
• 자연스럽게 SPA 형태
• Server Side Rendering (SSR)
  • 화면에 보여질 리소스를 서버로 요청
  • 서버로부터 받아온 리소스를 렌더링

Virtual DOM

• 메모리에 가상으로 존재하는 DOM → React가 실제 DOM 조작하지 않고도 UI 변경 가능
  
• JavaScript 객체
• 빠른 속도
• 상태 업데이트 시, 업데이트 필요한 곳의 UI를 Virtual DOM을 통해 렌더링
• 효율적인 비교 알고리즘으로 현재 DOM 과 비교 → 차이가 있는 곳을 감지 → 실제 DOM에 패치
• 주의사항
  • 데이터가 지속적으로 변하는 동적 애플리케이션에서는 :)
  • 데이터가 자주 변경되지 않는 정적 애플리케이션에서는 :(

React 특징

선언형

• 목적과 결과에 치중한 선언형 프로그래밍
• JSX의 캡슐화 → 어떤 마크업 구조를 갖고 있는지 파악 가능
  
• 가독성, 유지보수성
• 재사용성

Component

• JavaScript class로 정의된 React 컴포넌트의 기본 class
• HTML 요소를 반환해주는 JavaScript 함수
• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 장점
  • 기능, UI 단위로 캡슐화 → 독립성, 재활용성 증가
  • 코드 유지보수 용이
  • 구성 파악 용이 (가독성)

Data Binding

• Data Binding
  • 두 데이터 혹은 정보의 소스를 일치시키는 기법
  • 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
• 단방향 데이터 바인딩
  • 단 하나의 Watcher가 데이터 갱신 감지
  • JS → HTML
• 장점
  • 하나의 Watcher 사용 → 양방향보다 성능 굳
  • 데이터가 한 방향으로만 흐름 → 코드 이해, 데이터 추적, 디버깅 용이
• cf) 양방향 데이터 바인딩 : Angular, Vue

JSX

JSX

• const element = <h1>Hello, world!</h1>;
• Babel
  • JSX 코드를 JavaScript 변환해주는 문법적 도구
  • 최신 JS 문법을 모든 브라우저가 제공할 수 있도록 구기능으로 변환

JSX 등장 배경

• 로직에 의해 동적으로 렌더링되는 요소가 많아짐
• 이를 위해 렌더링 로직, 마크업이 함께 존재하는 JSX 등장

장점

• 개발자 경험 (Developer Experience, DX)
  • 코드 읽기 쉽다, 간결
  • 중첩된 선언형 구조 사용
• 익숙 : 팀 생산성 향상
• 문법 오류 감소

JSX 규칙

• 모든 태그 닫아야 한다.
• 단일 상위 태그
  • 여러 요소 반환하려면 단일 상위 태그로 요소 감싸야 함
  • VirtualDOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록
  • React.Fragment : 실제 DOM에 적용X, 그룹화하는 역할

    return (
    	<React.Fragment>
    			...
    	</React.Fragment>
    )
    
    // 축약형
    return (
    	<>
    		...
    	</>
    )	

• 중괄호 안에 표현식
  • 자바스크립트의 값
  • <h1> Hello, {name} </h1>;
• camelCase
  • class → className : class는 예약어 <h1 className="Jnary">MY PAGE</h1>
    
  • inline-style 속성도 backgroundColor fontSize

React 실행하기

Package Manager

• 다양한 라이브러리 사용 : dependencies
  • 버전 업데이트, 최신 버전의 새로운 CDN 경로 알아야함
  • 매번 라이브러리 사이트 방문?
  • No! 관리해주는 매니저 사용! → Package Manager
• 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 관리, 갱신, 삭제할 수 있도록 관리를 도와주는 시스템
• ex. npm yarn pnpm yarn-berry
• yarn 설치방법
  • node.js 설치 확인 → npm도 함께 설치됨

    node -v

  • yarn : npm 통해 설치

    npm install -g yarn
    yarn -v

CRA

• Create-React-App
• 최신의 리액트 앱을 설정할 수 있도록 페이스북에서 제공하는 공식 보일러플레이트
• 번들러, Babel, 개발 서버, 이미지 에셋 설정 등

npx create-react-app project-name
cd project-name
npm start

Vite + React

• Vite : Esbuild 기반으로 만들어진 프론트엔드 빌드툴
• Vite 사용 이유
  • CRA : JS로 구성된 Webpack 사용 → 느린 속도
  • esbuild 번들러 : Go 언어 (멀티 슬드 언어) → 속도 개선 (100배)

1. 프로젝트 생성

   npx create-vite

2. 프로젝트 정보 입력 : 이름, react, javascript

   // 이렇게도 가능
   npx create-vite project명 --template react

3. 디렉토리 이동

   cd project명

4. 의존성 모듈 설치

   npm install

5. React 앱 실행

   npm run dev

React 구조

• package.json
  • 프로젝트가 의존하고 있는 패키지 목록
• .gitignore
  • git에 올라가지 말아야 할 파일 관리
  • node modules, .env, DS_Store 등
• 컴포넌트 구조
  • main.jsx 에서 최상위 컴포넌트인 App.jsx 의 return 값인 JSX 코드 가져옴
  • index.html 의 #root 속으로 들어가 DOM 형성 → 많은 컴포넌트들이 결국 index.html 페이지 하나로 모임 (SPA)