React와 Next.js 중에 뭘 써야 하는데

아침부터 막힌다

출근했다. 오늘 새 프로젝트 킥오프. 팀장님이 말했다. “이번 건 Next.js로 갑시다.”

어? 우리 지금까지 React 썼잖아.

뭐가 다른데.

회의실에서 돌아왔다. 일단 노션 켰다. ‘React vs Next.js’ 검색했다.

아티클 100개 나온다. 다 읽을 수 없다.

ChatGPT한테 물었다. “Next.js가 뭔가요?”

답: “Next.js는 React 프레임워크입니다.”

…그래서?

사실 React도 헷갈린다

솔직히 말하면 React도 아직 헷갈린다.

useEffect 의존성 배열. 빈 배열이면 한 번만 실행. 값 넣으면 그거 바뀔 때마다 실행.

맞나?

맞긴 한데 실전에서 쓰면 무한 루프 돌아간다. 왜 그런지 모른다.

선배가 “React 기본기부터 다시 보세요” 했다. 알겠다고 했다. 안 봤다.

이제 Next.js를 배워야 한다. React도 모르는데.

점심시간. 편의점 갔다. 삼각김밥 2개.

유튜브 켰다. “Next.js 10분 완벽 정리”

10분이 아니다. 30분이다. 거짓말하지 마.

영상 보는데 모르는 단어 나온다. “SSR”, “SSG”, “ISR”.

…뭔데.

선배한테 물어봐야 하는데

오후 3시. 선배 자리 옆 지나갔다.

물어볼까. 아니다. 바빠 보인다.

4시. 다시 지나갔다.

“저기… 선배님.”

“응?”

“Next.js랑 React 차이가 뭔가요?”

선배가 웃는다. “아 그거? 간단해.”

간단하다는 말 들으면 간단한 적이 없다.

“Next.js는 React 위에 올라간 프레임워크야. 서버 사이드 렌더링 지원하고.”

“아…”

“라우팅도 파일 기반으로 되고, API 라우트도 만들 수 있어.”

“네…”

“근데 너 React Router 써봤어?”

“네. 쓴 것 같은데요.”

“그거랑 비교하면 이해 빠를 거야.”

안 빠르다.

블로그 읽기 시작

자리 돌아왔다. 구글 검색 시작.

“React vs Next.js 차이”

첫 번째 글. 영어다. 닫았다.

두 번째 글. 한국어다. 읽는다.

“React는 라이브러리, Next.js는 프레임워크입니다.”

뭐가 다른데. 라이브러리랑 프레임워크.

또 검색한다. “라이브러리 vs 프레임워크”

“라이브러리는 내가 호출, 프레임워크는 나를 호출.”

…무슨 소리야.

세 번째 글. 그림 많다. 좋다.

“CSR vs SSR”

CSR은 Client Side Rendering. 브라우저에서 렌더링.

SSR은 Server Side Rendering. 서버에서 렌더링.

그래서 뭐가 좋은데.

“SSR은 SEO에 유리합니다.”

SEO가 뭔데. 또 검색.

Search Engine Optimization. 검색 엔진 최적화.

아… 구글 검색 잘 되게 하는 거구나.

그럼 무조건 SSR 써야 하는 거 아냐?

아니래. 경우에 따라 다르래.

어떤 경우에.

예제 코드 보기

유튜브 다시 켰다. “Next.js 시작하기”

따라 한다.

npx create-next-app@latest

설치 중. 5분 걸린다.

완료. 실행한다.

npm run dev

localhost:3000 열린다. 뭔가 나온다.

오… 신기하다.

근데 이게 React랑 뭐가 다른지 모르겠다.

코드 본다. app 폴더 있다. page.tsx 있다.

어? 우리 회사는 pages 폴더 쓰는데.

검색한다. “Next.js app directory vs pages directory”

아. 버전이 다르다. App Router랑 Pages Router.

둘 다 배워야 하나.

머리 아프다.

회의 시간

5시. 회의 시작.

팀장님: “Next.js로 하는 이유는 SEO 때문입니다.”

아 그거 아까 봤다.

팀장님: “그리고 Image Optimization도 자동으로 되고요.”

이미지 최적화? 그게 뭔데.

선배: “Font도 자동으로 최적화되죠.”

다들 고개 끄덕인다. 나도 끄덕인다.

이해 못 했다.

팀장님: “신입님, 이번 프로젝트 메인 페이지 맡아보세요.”

“네… 네.”

끝났다. 자리 돌아왔다.

멘붕이다.

다시 공부 시작

퇴근까지 2시간.

일단 Next.js 공식 문서 켠다. 영어다.

한국어 있나. 있다. 번역 이상하다.

그냥 영어 본다. 번역기 돌린다.

“Getting Started”

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

이건 React랑 똑같은데.

다음 페이지. “Routing”

“Next.js uses file-system based routing.”

파일 기반 라우팅. 뭔 소리야.

설명 읽는다. 아…

app/about/page.tsx 만들면 /about 경로 생긴다.

오 신기하다.

React에선 Router 설정 따로 했는데.

<Route path="/about" component={About} />

이렇게.

Next.js는 그냥 파일 만들면 끝.

이거 하나는 편하네.

실습 시작

노션 닫는다. VSCode 연다.

새 프로젝트 만든다. create-next-app.

이번엔 제대로 본다.

TypeScript? Yes.

ESLint? Yes.

Tailwind CSS? Yes. (쓸 줄 모르는데)

App Router? Yes.

설치 완료.

폴더 구조 본다.

app/
  layout.tsx
  page.tsx
public/
  ...

layout.tsx 연다. 뭔가 많다.

RootLayout. children 받는다.

아… 이게 전체 레이아웃이구나.

page.tsx 연다. 메인 페이지.

수정해본다.

export default function Home() {
  return <h1>테스트</h1>
}

저장. 브라우저 새로고침.

“테스트” 나온다.

된다!

기분 좋다. 뭔가 한 것 같다.

라우팅 테스트

폴더 만든다. app/test/page.tsx

export default function Test() {
  return <h1>테스트 페이지</h1>
}

저장. /test 접속.

된다!

오… 이거 되게 직관적인데?

React Router는 설정 파일 따로 만들어야 했는데.

이건 그냥 폴더만 만들면 되네.

좋다. 이해했다. 조금.

dynamic route 해본다. app/post/[id]/page.tsx

export default function Post({ params }: { params: { id: string } }) {
  return <h1>Post {params.id}</h1>
}

/post/1 접속. “Post 1” 나온다.

/post/123 접속. “Post 123” 나온다.

오…

React Router에선 useParams 썼는데.

여긴 props로 받네.

다르다. 근데 이해 간다.

데이터 fetching 막힘

다음. 데이터 가져오기.

블로그 글 봤다. “Next.js에선 async component 쓴다”

뭔 소리야.

코드 본다.

async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

어? component에 async?

React에선 안 됐는데.

useEffect에서 fetch 했는데.

혼란스럽다.

검색한다. “Next.js async component”

“Server Component에서 가능합니다.”

Server Component? 또 새로운 개념.

Client Component도 있대.

“use client” 쓰면 Client Component.

안 쓰면 Server Component.

…뭐가 다른데.

Server Component vs Client Component

블로그 3개 읽었다.

정리한다.

Server Component:

• 서버에서 실행
• useState, useEffect 못 씀
• 데이터 fetching 편함

Client Component:

• 브라우저에서 실행
• useState, useEffect 씀
• 상호작용 필요할 때

아… 그러니까.

버튼 클릭, input 입력 → Client Component.

그냥 데이터 보여주기 → Server Component.

이해 간다. 조금.

근데 실전에서 어떻게 나누지.

모르겠다.

일단 넘어간다.

7시 퇴근

퇴근 시간. 가방 챙긴다.

오늘 배운 것:

• Next.js는 React 위 프레임워크
• 파일 기반 라우팅
• Server Component, Client Component

아직 모르는 것:

• 언제 Next.js 쓰고 언제 React 쓰는지
• SSR, SSG, ISR 차이
• Image, Font 최적화
• API Routes
• Middleware
• …

많다.

내일 또 배워야지.

집 가는 지하철. 앉았다.

인프런 켰다. “Next.js 완벽 가이드”

10분 듣다가 잤다.

집 도착

11시. 씻고 침대 누웠다.

노션 켠다. “오늘 배운 것” 적는다.

2024.01.15
- Next.js 기본 세팅
- 파일 기반 라우팅
- dynamic route
- Server Component 개념

내일 할 것:

• 메인 페이지 디자인 보고 컴포넌트 나누기
• 데이터 fetching 방법 더 찾아보기
• 선배한테 SSR 물어보기

노션 닫는다.

유튜브 켠다. 알고리즘 영상 본다.

Next.js 관련 영상 뜬다.

“Next.js 13 정복하기”

북마크 했다. 안 본다.

자야지.

근데 걱정된다.

내일 팀장님이 진행 상황 물어보면 뭐라 하지.

“레이아웃 잡고 있습니다” 하면 되려나.

일단 자자.

내일 일은 내일.

며칠 뒤

수요일. 프로젝트 3일 차.

메인 페이지 반 완성했다.

아직 데이터 연결 안 했다. 하드코딩이다.

선배가 코드리뷰 남겼다.

“여기 Client Component로 할 필요 없어요. Server Component로 바꾸세요.”

아… 맞다.

버튼 없는데 “use client” 썼다.

습관적으로 썼다. React 하듯이.

수정한다.

또 리뷰 왔다.

“Image 태그는 next/image 쓰세요.”

아 그거 있었지.

import Image from 'next/image'

<Image src="/logo.png" alt="logo" width={200} height={100} />

width, height 필수래.

모르고 안 썼다가 에러 났다.

수정 완료. 다시 올린다.

조금씩 이해 중

목요일.

오늘은 API 연결한다.

fetch 써서 데이터 가져온다.

async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

오… 된다.

useEffect 없이 되네.

편하다.

loading.tsx 만들었다. 로딩 화면 자동으로 나온다.

error.tsx 만들었다. 에러 처리 자동.

신기하다. 이런 것도 되네.

React에선 다 직접 만들었는데.

아직도 헷갈림

그래도 아직 모르는 거 많다.

캐싱이 어떻게 되는지.

revalidate가 뭔지.

generateStaticParams가 뭔지.

선배가 “공식 문서 보세요” 한다.

본다. 어렵다.

예제 코드 복사해서 쓴다.

이해는 나중에.

결론

결론 내린다.

React vs Next.js 언제 쓰냐.

아직 모르겠다.

근데 조금은 알겠다.

• 간단한 SPA → React
• SEO 필요 → Next.js
• 서버 로직 필요 → Next.js
• 빠른 프로토타입 → React

이 정도?

맞는지 모르겠다.

선배한테 물어봐야지.

내일.

---

어제도 오늘도 내일도, 모르는 건 당연하다. 일단 만든다. 에러 나면 고친다. 그게 배우는 거다.