7/4 TIL

Hwi·2024년 7월 4일

TIL

목록 보기

63/96

📚 진행한 공부

개인과제 포켓몬 상세페이지 작성
Next.js Rendering

📖 개인과제 포켓몬 상세페이지 작성

PokemonDetail 컴포넌트

pokemondetail/[id]/page.tsx

위에서 만들어 둔 포켓몬디테일 컴포넌트를 여기로 불러오기만 하면 됐다.

문제없이 잘 들어가지는 걸 볼 수 있었다.

이제 내게 남은 건 디테일을 추가하는 것

포켓몬디테일 컴포넌트에 다양한 포켓몬의 상세 정보들을 담아주고 pokemondetail/[id]/page.tsx에서 불러왔음

잘 작동하는 걸 볼 수 있음

CSS를 좀 더 가공하고 싶지만.. 과제 필수 구현 사항은 다 만족했기 때문에 개인 공부에 좀 더 시간을 쓰려고 한다

📗 Next.js Rendering

📖 01. v12와 v13의 주요 차이점 훑기

(1) 주요 차이점
Next.js를 할 때, 가장 중요하게 보는 개념 = 렌더링 방식
CSR, SSR, ISR, SSG
Next.js 버전 12까지는 이러한 렌더링 방식을 '페이지 단위'로 규정했음 예를 들어

"about 페이지는 SSG로 동작함"
"todolist 페이지는 SSR로 동작함"
"sample 페이지는 CSR로 동작함"

과 같이 말이다. 그러나, Next.js 13 버전에서는 React 18 버전에서 제시한

서버 컴포넌트(서버 상에서만 동작)
클라이언트 컴포넌트(브라우저에서만 동작)

에 힘입어 렌더링 방식이 컴포넌트 단위로 벽녕됨. 이제는 한 페이지 안에서 여러 렌더링 방식이 공존할 수 잇음

📖 02. 클라이언트 컴포넌트 / 서버 컴포넌트

(1) 잊지 말아야 할 것
기본적으로 app 폴더 하위 컴포넌트는 모두 서버 컴포넌트
매우 중요함

(2) 서버 컴포넌트

// src>app>page.tsx
export default function Home() {
  console.log("여기는 어디일까요?");

  return (
    <div className="p-8">
      안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!
    </div>
  );
}

이런 코드가 있다고 하면, 브라우저가 아니라 terminal에 console.log가 출력이 됨.

우리가 서버를 돌리고 있는 localhost 즉, 내 컴퓨터의 node 환경에서 console.log가 출력되고 있음

만일 프로젝트가 aws 같은 클라우드 컴퓨팅에서 돌아가고 있다면, 브라우저가 아니라 해당 서버의 로그에 console.log가 출력될 것임

alert 명령어는 서버 컴포넌트(Node.js 런타임 환경)에선 사용할 수 없고 os.hostname 명령어는 사용이 가능

(3) 클라이언트 컴포넌트
서버 컴포넌트에서는 alert, confirm 처럼 유저와의 상호작용이 필요한 메서드, 기능은 사용할 수 없음. 마찬가지로 useEffect, useState 처럼 CSR을 위해 사용된 기술도 사용할 수 없으나
이런 경우엔 컴포넌트 최상단에 "use client"만 붙여주면 됨

(4) 언제, 어떻게 SC/CC를 쓰는지?
유저와의 상호작용이 있는 경우 CC, 그 외의 경우는 SC를 권장

(5) 더 나아가기(컴포넌트 분리)

// src>app>page.tsx
export default function Home() {
  return (
    <div className="p-8">
      안녕하세요! 
      <section>
        <h1>제목</h1>
      <button onClick={() => {
          alert("안녕하세요!");
        }}
      >클릭</button>
		</section>
    </div>
  );
}

이 코드는 "use client"가 최상단에 없기 때문에 서버 컴포넌트임
useEffect, useState, onClick 등은 CC에서만 가능한 기술인데 SC인 컴포넌트에서 사용을 하고 싶어서 위에 "use client"를 써버리게 되면 CC로 되어버리기 때문에 이럴 경우엔 이렇게 컴포넌트를 분리할 수 있음

page.tsx

// src>app>page.tsx
import Button from "@/components/Button";

export default function Home() {
  return (
    <div className="p-8">
      안녕하세요! 
      <section>
        <h1>제목</h1>
		<Button />
      </section>
    </div>
  );
}

Button.tsx

// src>components>Button.tsx

"use client";

import React from "react";

const Button = () => {
  return (
    <button
      onClick={() => {
        alert("안녕하세요!");
      }}
    >
      클릭
    </button>
  );
};

export default Button;