[26.02.02] React 재직자 수업 3 -클라이언트 컴포넌트, 서버 컴포넌트

React의 모듈

18버전부터 자동으로 스트리밍 ssr이 적용이 된다

 

 

Rest API는 별도로 있고 앞단에 노드js환경이 또있다

 

모든 컴포넌트는 기본적으로 ui가 만들어진다

ui를 만드는 컴포넌트는 클라이언트 컴포넌트다>? 아님

html을 넘겨서 dom을 브라우저에서 생성한다.

 

 

 

 

 

기본컴포넌트는 서버 컴포넌트이다

 

 

처음부터 React 앱 만들기 – React

처음부터 React 앱 만들기 – React

 

순수 리액트 프로젝트 만들기

npm create vite@latest front-end-react-csr -- --template react

 

vite는 빌드 도구

 

프로젝트 생성 됨

script에 dev가 있다

 

npm run dev하면 실행됨

html을 브라우저가 자바스크립트를 실행하면서 div안에 만든거다

서버는 비동기로 json만 받아서 사용하고 서버에서 html을 만들지 않는다

모든 ui는 브라우저에서 만들어진다.

 

 

SSR +Streaming SSR은 만드는 명령어도 다르다

npx create-next-app@latest

 

 

 

D:\react-course\projects>npx create-next-app@latest
Need to install the following packages:
create-next-app@16.1.6
Ok to proceed? (y)

√ What is your project named? ... front-end-react-ssr
√ Would you like to use the recommended Next.js defaults? » No, customize settings
√ Would you like to use TypeScript? ... No / Yes
√ Which linter would you like to use? » ESLint
? Would you like to use React Compiler? » No / Yes

 

리액트 컴파일러란?

개발자 실수를 발견하면 자동으로 코드를 바꿔서 컴파일을 해줌

어떤 최적화?

리랜더링 오류 잡아줌..

특정 상태 하나만 바뀌어도 전체가 리랜더링 되면 문제가 있다.

코드를 검사해서 리랜더링을 최소화하게 고쳐서 빌드해줌

처음 개발할때는 no로 일단 하고 나중에 최종 빌드할때 yes로 하고 빌드하자

 

생성된 프로젝트 구조이다

 

app는 favicon 등...

global.css앱 전체에서 쓰는 파일

layout.js모든 페이지에 공유되는 루트 레이아웃 파일

public은 정적 파일이 들어간다 이미지 같은

npm run dev 로 실행시킨다

 

 

서버에서 html만들어서 내려온다

그래서 검색도 더 잘됨

빌드하면 .next가 자동으로 생성된다.

 

git ignore에는 node module 이랑 .next를 제외하는걸 넣어줌

 

서버컴포넌트가 왜 기본일까...

다운로드되는 자바 스크립트의 양을 줄이기 위해서이다

 

 

컴포넌트란?

 

재사용 가능하고 조립 가능한 독립적인 UI객체

 

다양한 컴포넌트들을 결합해 하나의 애플리케이션 구성

 

제일 바깥쪽에 root컴포넌트가있다.

안쪽에 form컴포넌트

그안에 ui컴포넌트가있다

 

다른페이지이동하면 루트 컴포넌트는 그대로있고 다른 페이지로 이동

페이지 컴포넌트가 바뀌는

 

루트 레이아웃 컴포넌트

children?뭐야

<RootLayout></ RootLayout>

저 안에서 작성되는 내용이 children이라는 변수로 받을수 있음

 

import Image from "next/image";

import styles from "./page.module.css";

export default function Home() {

  return (

    <div className={styles.page}>

      <main className={styles.main}>

        <Image

          className={styles.logo}

          src="/next.svg"

          alt="Next.js logo"

          width={100}

          height={20}

          priority

        />

        <div className={styles.intro}>

          <h1>To get started, edit the page.js file.</h1>

          <p>

            Looking for a starting point or more instructions? Head over to{" "}

            <a

              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"

              target="_blank"

              rel="noopener noreferrer"

            >

              Templates

            </a>{" "}

            or the{" "}

            <a

              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"

              target="_blank"

              rel="noopener noreferrer"

            >

              Learning

            </a>{" "}

            center.

          </p>

        </div>

        <div className={styles.ctas}>

          <a

            className={styles.primary}

            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"

            target="_blank"

            rel="noopener noreferrer"

          >

            <Image

              className={styles.logo}

              src="/vercel.svg"

              alt="Vercel logomark"

              width={16}

              height={16}

            />

            Deploy Now

          </a>

          <a

            className={styles.secondary}

            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"

            target="_blank"

            rel="noopener noreferrer"

          >

            Documentation

          </a>

        </div>

      </main>

    </div>

  );

}

html로 부르는것이 아니다

jsx로 부른다

자바스크립트이다

 

Image도 html아니다

next.js에서 사용하는 컴포넌트이다

 

어디를 봐도 홈 컴포넌트가 안들어간다

홈컴포넌트가 들어가는 자리는 {children}이다

기본적으로 들어가는곳은 여기이다

home컴포넌트

로그인 컴포넌트

 

 

 

Next.js는

SSR(Server Side Rendering)으로 동작하는 리액트 프레임워크입니다. SSR은 서버 측에서 즉시 렌더링 가능하게끔 가공한 html파일을 만들어 브라우저에게 보내고, 브라우저는 이를 다운하여 즉각 화면에 렌더링할 수 있는 방식입니다. 또한 Next.js는 Code splitting이라는 기술을 통해 초기 로드 시 필요한 최소한의 코드만 다운로드하여 실행하므로, 앱의 초기 로딩 속도를 개선함과 동시에 React보다 가볍게 동작할 수 있습니다. SSR이기에 SEO 또한 훌륭합니다. 심지어 13버전부터 원하는 페이지에서 CSR이 가능하기 때문에 Next.js의 장점만 쓸 수 있어졌다고 할 수 있습니다.

 

하나의 dom은 유지를 하면서 layout.js의 칠드런 자리에 page컴포넌트들이 계속 랜더링 된다.