(React) 4 - React 오프라인 교육 1

■ React 란?

● 웹 및 네이티브 유저 인터페이스를 위한 라이브러리

● 웹페이지를 개별의 컴포넌트로 만들고 붙이는 형식으로 하나의 페이지를 만든다.

● SPA(Single Page Application) 사용

- 페이지별로 돔이 생성되고 랜더링을 하기 때문에 화면이 깜빡인다.

  그러나 SPA 는 단일돔 사용하고 유지하면서 변경 사항만 업데이트 한다.

- 지속적으로 데이터를 UI 에 나타내는 애플리케이션에 유리하다.

 

※ react18 부터는 Next.js 가 기본이다.

 

■ SPA 렌더링 방식

1. 클라이언트 사이드 렌더링(CSR 브라우저) - React

● 랜더링을 위한 모든 파일(JS) 받아야해서 처음 다운로드하는 번들의 크기가 크다.

● 초기 네트워크 트래픽 증가로 화면 로딩 느림

● 서버 실행 환경 : 제한 없음

-> 모든 UI 생성 위해 파일을 모두 받아야 한다.

-> 브라우저에서 UI 를 만든다.

 

2. 서버 사이드 렌더링(SSR) - Next.js(프레임워크)

● 첫 페이지에 대한 파일만 받아와 번들의 크기가 작음

● 서버 실행 환경 : Node.js

● JSON(HTML/CSS + 데이터) 와 JS 을 응

-> 요청할 때 그 때 받는다.

-> 서버에서 UI 를 만든다. 

※ html css 만드는 작업 : 랜더링

 

■ 기존 CSR 단점

● 타사 라이브러리를 다운받고, 실행
- 서버에서 처리할 경우 타사 라이브러리를 다운받을 필요 없음
● 백엔드 리소스(DB)에 대한 직접적인 접근이 불가능, REST API 이용
- 서버에서 처리할 경우 데이터 요청 작업이 줄어듬
● 초기 로딩을 빠르게 하기 위해 수동 코드 스플리팅시 불편함이 있다.
- 서버에서 자동으로 코드 스플리팅을 해주면 편리 (클라이언트 컴포넌트만)

※ 코드 스플리팅 : 코드를 쪼개는 것
● 부모의 데이터 페치 후 자식 컴포넌트에서 데이터 페치를 할 경우 
- 부모 컴포넌트 렌더링 -> 부모 데이터 페칭 -> 자식 컴포넌트 렌더링 -> 자식 데이터페칭
- 부모 데이터 페칭이 완료되기 전까지 자식컴포너트의 렌더가 지연되는 워터폴(waterfall) 발생
- 서버에서 렌더링할 경우 한 번의 서버 요청만 하면 됨

 

■ 서버 컴포넌트(RSC)

● React 18 & Next.js 13 App Router 에서 적용

● SSR의 장점을 살리고, 단점을 극복해서 빠른 응답 속도를 가짐
- 서버에서 할 수 있는 일은 서버 컴포넌트가 수행
- 서버가 할 수 없는 나머지 작업은 클라이언트 컴포넌트가 수행

● 서버 컴포넌트 특징

- 클라이언트 상태와 관련된 useSate, useReducer등의 훅을 사용할 수 없음
- 렌더링 생명주기와 관련된 useEffect를 사용할 수 없음
- DOM API에 접근하거나, window, document 등에 접근할 수 없음

( DOM  은 브라우저에서만)
- 서버에서 HTML 코드와 JS 코드를 서로 매칭시켜 렌더링 결과 생성
- 하이드레이션을 수행하기 위한 JS(Chunks)를 클라이언트로 보내지 않음

- 우선 순위에 따라 렌더링 결과를 JSON들로 직렬화해서 스트리밍 응답 제공
- 클라이언트는 먼저 도착한 JSON을 읽고 렌더링할 수 있음
- 이런 방식은 사용자에게 결과물을 빨리 보여줄 수 있음 

 

※ html json 으로 받는다.

※ 스트림 : 순차적으로 데이터 보내는 것 

 

● 서버 사이드 렌더링과의 차이점

- 서버 사이드 렌더링은 정적 HTML로 렌더링 수행하고, 필요한 경우 JS(Chunks)를 응답으로 제공
- 클라이언트는 정적 HTML 응답과 JS(Chunks)를 로딩해서 하이드레이션(Hydration) 처리

 

■ 설치

● vs code

● vs code extension

- ESLint : 자바스크립트 문법 검사

- intellisense for css ~ : 클래스 이름 자동으로 나오기

- live server : 내장 웹서버

 

바꿔주기

 

mkdir node-app-test

cd node-app-test

npm init 하고 계속 엔터해서 package.json 생성

 

 

파일 자동저장 setting

 

※ 기본적으로 react 는 노드애플리케이션 폴더 형태로 생성되므로 노드 폴더를 생성해줘야 한다.

 

 

npm run start 또는 npm start 한다.

 

■ 모듈 이해

* 모듈이란

● 변수, 함수, 클래스, 인스턴스의 집합으로 독립된 파일(~.js)로 만든 것
● 모듈로 만들면 여러 프로그램에서 재사용 가능 

 

* 모듈 종류

● CommonJs 모듈: Node.js 기본
module.exports 및 exports 를 이용해서 내보내기 작성
require() 함수를 이용해서 가져옴

●  EcmaScript 모듈: EcmaScript 2015(ES6)에서 지원
export default와 export를 이용해서 내보내기 작성
impor문을 이용해서 가져옴

 

 

 

※ react는 ecmaScript 모듈이 기본이다.

 

 

주로 구조분해해서 그대로 사용할 수 있게 한다.

 

 

export 와 export default

export 로 내보내는 경우에는 {} 를 사용해서 내보내야 하고,

export default 는 그냥 바로 받으면 된다.

 

React는 webpack을 이용해서 ES6 모듈 파일들을 가져와서
하나의 전체 파일 또는 몇개의 파일들로 합침(번들링)

 

■ 외부 패키지 설치

https://www.npmjs.com/

 

 

npm install jquery

 

 

npm install -D 패키지명 (개발용 패키지 설치)

 

 

github 올릴때는 용량 큰 node_modules 를 빼고 올린다.

그러면 해당하는 모듈을 받았을 때는 다시 설치해줘야 하는데 이에 대한 명령어가 npm install 이다.

package.json에 기술된 모든 패키지를 자동 설치해준다.

 

패키지 삭제는 npm uninstall 패키지명 이다.

 

vue 클리 설치

npm install -D @vue/cli

 

 

패키지 검색

 

 

■ 패키지 세부 정보

 

1.1.1: npm install 시 동일한 버전만 설치
^1.1.1: npm install 시 minor 버전은 업데이트 가능함(1.2.0가 설치될 수 있음)
~1.1.1: npm install 시 patch 버전은 업데이트 가능함(1.1.2가 설치될 수 있음)
>=, <=, >, <는 이상, 이하, 초과, 미만으로 업데이트 가능함
@latest는 가상 최신 버전으로 업데이트 가능함
@next로 가장 최신 배포판으로 업데이트 가능함(불안정함)

 

* package-lock.js

npm으로 패키지를 설치할 때 생성되는 파일

 

 

npx create-next-app@latest : 가장 최신 버전으로 설치

 

 

App Router : 서버 컴포넌트 쓰려면 무조건 yes

 

 

● app

- layout.js : 전체 페이지 공통 정적 layout

- page.js : 첫 페이지 화면 

 

- page.module.css : page.js 에서만 사용하는 css

 

● public : 정적파일(그림파일)

※ css, js public 에 포함하지 않는다.

 

● gitignore : git 에서 업로드 시 빼겠다

● jsconfig.json : vscode 에서 자바스크립트 관련 프로젝트이 라는 걸 인식하게 하는 파일

● next.config.mjs : m 이 붙으면 es 모듈에서 사용

 

 

npm run build 하면 최종산출물 다음과 같이 나온다.

build 하면 실행속도 빠르다.

 

 

html 태그로 보이지만 jsx 마크업 문서이기 때문에 거기에 맞춰서 써야한다.

class 는 className 로 표현한다.

 

 

함수로 보이지만 컴포넌트를 정의하는 것이다.

RootLayout 이 컴포넌트 이름이고,

return 이 component 에 나오는 ui 를 정의한다.

 

자식컴포넌트로 넘겨줄 데이타를  ({  }) 에 넣는다.

그리고 자식 컴포넌트도 return 안에 {  } 로 넣어준다.

 

 

img 가 아닌 Image 로 사용한다.

 

 

children 에 해당하는 부분에 page.js 가 그려지게 된다.

 

 

 

Link 컴포넌트인데 a 태그 역할을 한다.

 

 

export default 해야지 

 

 

use client 있으면 클라이언트 컴포넌트이다.

브라우저에서 랜더링 된다.

 

 

css 랜더링 하고 js 하게 순서 해주는 걸 권장한다.

 

■ 컴포넌트 

app 폴더 안에 컴포넌트 작성하면 기본 서버 컴포넌트이나,

컴포넌트 최상단에 use client 디렉티브 추가하면 클라이언트 컴포넌트가 된다.

 

● 함수형 컴포넌트 정의

 

■ 앱 라우터

 

 

next.js 기본 라우터를 쓰면 app 안에 폴더만 넣어도 자동으로 라우팅을 해준다.

● 마지막 세그먼트는 

 

 

page.js 가 있어야 페이지 컴포넌트이다.

button~ 에 해당하는 js 는 UI 컴포넌트이다.

 

다음과 같이 나온다.

 

layout.js 는 page.js 는 무조건 서버 컴포넌트이다. 

왜냐하면 서버에서 먼저 읽어야 하기 때문이다. 

 

 

 

두개의 폴더에 layout.js 파일 영향을 받는다. 

 

■ JSX

 

JSX 내부에 출력할 내용이 있을 경우 { } 표현식을 사용

제어문은 불가

 

* if문 대신 { } 표현식에 사용할 수 있는 조건 연산자 
JSX 표현식에는 if문을 사용할 수 없음
삼항 연산자 활용
&&, || 연산자 활용 

 

 

&& 참이면 뒤에 출력

|| 참이면 앞에 출력

 

CSS 코드처럼 보이지만 CSS 가 아니라 JS 로 표현된 코드이다. 

 

함수 참조변수를 넣어줘야 한다. 

 

 

상태는 다음과 같이 상태변수를 통해 바꿔야 한다. 

 

 

` 백틱을 사용해서 문자열을 매개변수화 시켜도 된다. 

 

 

반복이 되는 항목은 식별자가 필요하다. 

 

 

use 라는 말이 나오면 Hook 이다.

 

 

참조해서 input 의 기능을 쓸 수 있다. 

 

event.preventDefault()를 통해 화면 넘어가는 기본값을 방지해준다.