Showing Posts From

Vs

Next.js vs React, 신입은 둘 다 헷갈린다

Next.js vs React, 신입은 둘 다 헷갈린다

Next.js vs React, 신입은 둘 다 헷갈린다 면접 때 했던 말 "React 할 줄 아세요?" "네, 할 줄 압니다." 거짓말은 아니었다. 부트캠프에서 6개월 동안 React 했다. 컴포넌트 만들고 state 쓰고 props 넘기고. Todo 앱도 만들었다. 영화 검색 앱도 만들었다. 포트폴리오에 당당하게 썼다. 근데 회사 왔더니 Next.js다. "우리 Next.js 쓰는데, React 할 줄 알면 금방이에요." 선배가 웃으며 말했다. 나도 웃었다. 속으로는 'Next.js가 뭐지?' 했다.첫날 코드 열었을 때 /pages /api index.js _app.js _document.js이게 뭐지. 부트캠프에서 본 구조가 아니다. src 폴더는? components 폴더는? App.js는 어디 갔나? 선배가 설명했다. "pages 폴더에 파일 만들면 자동으로 라우팅돼요. /about 만들려면 about.js 만들면 돼요." "아... 네네." React Router 공부한 건 뭐지. useNavigate 쓰라고 했는데. BrowserRouter 감싸라고 했는데. 다 필요 없단다. getServerSideProps가 뭔데 export async function getServerSideProps(context) { const res = await fetch('https://api...') const data = await res.json() return { props: { data } } }선배가 보낸 코드다. "이 함수 안에서 데이터 받아오면 돼요. 서버에서 실행되니까 API 키 노출 안 돼요." 서버에서 실행된다고? 나는 useEffect 안에서 fetch 하는 것만 알았다. 컴포넌트 마운트될 때 데이터 받아오는 거. 그게 React 아닌가? "아 그건 클라이언트 사이드 렌더링이고, 이건 서버 사이드 렌더링이에요." 클라이언트... 서버... 렌더링... 부트캠프에서 들어본 것 같기도 하고.그래서 뭐가 다른데 퇴근하고 검색했다. "Next.js는 React 프레임워크입니다." React가 라이브러리면 Next.js는 프레임워크. 뭔 차이지. 더 검색했다.React: 라우팅 직접 해야 함 (React Router)Next.js: 파일 기반 라우팅React: 클라이언트 사이드 렌더링Next.js: 서버 사이드 렌더링, 정적 생성, 클라이언트 사이드 렌더링 다 됨React: SEO 약함Next.js: SEO 좋음음... 알겠는데 모르겠다. 결국 ChatGPT한테 물었다. "5살 어린이에게 설명하듯이 알려줘." 답변 읽었다. 여전히 모르겠다. 실무에서 느낀 차이 일주일 지났다. 태스크 받았다. "상품 상세 페이지 만들기." Next.js에서는 이렇게 했다.pages/products/[id].js 파일 만듦 getServerSideProps에서 상품 데이터 받아옴 컴포넌트에서 props로 받아서 렌더링끝. React였으면?컴포넌트 만들고 React Router로 라우팅 설정하고 useParams로 id 받고 useEffect에서 fetch하고 useState로 데이터 저장하고 로딩 상태 처리하고더 복잡하다. 그런데 Next.js가 쉬운 건 아니다. 뭔가 자동으로 해주는 게 많아서 이해가 안 된다. "왜 이렇게 돌아가는 거지?"를 모른다.헷갈리는 순간들 상황 1: 컴포넌트에서 라우터 쓸 때 // React import { useNavigate } from 'react-router-dom'; const navigate = useNavigate();// Next.js import { useRouter } from 'next/router'; const router = useRouter();비슷한데 다르다. 자동완성 믿고 쳤다가 에러 났다. 상황 2: Link 컴포넌트 // React <Link to="/about">About</Link>// Next.js <Link href="/about">About</Link>to인지 href인지 매번 헷갈린다. 둘 다 써봤다. 당연히 에러 났다. 상황 3: 이미지 최적화 // React <img src="/logo.png" />// Next.js <Image src="/logo.png" width={100} height={100} />Next.js는 Image 컴포넌트 쓰라고 한다. width, height 필수래. 왜 필수인지는 나중에 알았다. 최적화 때문이라는데. 처음엔 귀찮아서 그냥 img 태그 썼다. 선배가 PR에 코멘트 남겼다. "Image 컴포넌트 써주세요." 고쳤다. 선배들 대화 엿듣기 점심시간. "이번에 SSG로 바꿀까 SSR 유지할까?" "트래픽 보고 판단해야지. ISR도 고려해봐." "Vercel 배포하면 자동으로 최적화되니까 괜찮을 거야." 나는 김밥 씹으면서 고개만 끄덕였다. SSG? SSR? ISR? Vercel? 또 모르는 단어들이다. 퇴근하고 검색했다.SSG: Static Site Generation (정적 사이트 생성) SSR: Server Side Rendering (서버 사이드 렌더링) ISR: Incremental Static Regeneration (증분 정적 재생성)한글로 쓰니까 더 어렵다. 결국 깨달은 것 Next.js는 React를 포함한다. React로 할 수 있는 건 Next.js에서도 다 된다. useState, useEffect, 컴포넌트, props, 다 된다. 거기에 추가 기능이 있는 거다.파일 기반 라우팅 서버 사이드 렌더링 이미지 최적화 API 라우트 등등그래서 "React 할 줄 알면 Next.js도 할 수 있다"는 말이 틀린 건 아니다. 하지만 쉬운 것도 아니다. React 개념 제대로 모르는데 Next.js 기능까지 배우려니 머리 터진다. 지금 내 상태 입사 8개월. Next.js 프로젝트 3개 했다. 아직도 헷갈린다. getStaticProps와 getServerSideProps 언제 쓰는지 헷갈린다. dynamic import는 왜 쓰는지 모르겠다. prefetch는 뭔지 감도 안 온다. 그래도 한 가지는 안다. 면접 때 했던 "React 할 줄 압니다"는 거짓말이었다는 것. 제대로 아는 게 아니었다. 겉핥기였다. 지금도 마찬가지다. Next.js 쓰긴 쓰는데 제대로 아는 건 아니다. 선배가 짠 코드 복붙해서 조금씩 수정하는 수준이다. 신입의 생존법 모르면 물어본다. "이거 왜 getServerSideProps 쓰는 거예요?" "이 페이지는 왜 getStaticProps 안 쓰나요?" "Link 컴포넌트 prefetch 기본값이 true라는데 성능 괜찮나요?" 처음엔 물어보기 무서웠다. "이런 것도 몰라?" 할까 봐. 근데 선배들 반응은 의외로 괜찮다. "좋은 질문이네요. 왜냐하면..." 설명 들으면 50%는 이해된다. 나머지 50%는 나중에 이해된다. 모르는 건 노션에 적는다. "getServerSideProps: 매 요청마다 서버에서 데이터 받아옴. 실시간 데이터 필요할 때." 이렇게 쌓다 보면 언젠가 내 것이 될 거다. 아마도. 한 가지 확실한 것 React와 Next.js는 다르다. 비슷하지만 다르다. React는 라이브러리. 자유도 높다. 내가 다 설정해야 한다. Next.js는 프레임워크. 정해진 구조가 있다. 그 안에서 작업한다. 어느 게 더 나은가? 모르겠다. 회사가 쓰는 걸 쓴다. 신입은 선택권이 없다. 그냥 적응한다. 헷갈려도 계속 쓴다. 그러다 보면 익숙해진다. 아직은 헷갈리지만.면접 때 "Next.js 할 줄 아세요?" 물어보면 뭐라 대답할까. "React는 하는데 Next.js는 헷갈려요"가 정답일 것 같다. 솔직하게.