Next.js 배우기 3-패칭, 스타일링
Data Fetching in Next.js
데이터 패칭 종류
Next.js에서 데이터를 가져오는 방법에는 크게 세 가지 유형이 있습니다.
Static Generation (정적 생성)
정적 생성은 빌드 시점에 페이지를 생성하는 방식입니다. 이 방법은 매우 빠르고, 검색 엔진 최적화(SEO)에 유리합니다. 이 방식으로 생성된 페이지는 서버에서 정적 파일로 제공되므로, 서버 비용도 절감됩니다.
Server-side Rendering (서버사이드 렌더링)
서버사이드 렌더링은 요청 시점에 페이지를 생성하는 방식입니다. 이 방식은 동적인 페이지를 만들 수 있으며, 사용자 정의 API와 데이터베이스를 활용하여 데이터를 가져올 수 있습니다.
Client-side Rendering (클라이언트사이드 렌더링)
클라이언트사이드 렌더링은 브라우저에서 페이지를 생성하는 방식입니다. 이 방식은 초기 로딩 속도가 빠르며, 데이터를 가져오는 방식에 따라 다양한 기능을 구현할 수 있습니다.
그렇다면 이 방법들이 어떤 차이가 있을까요? 정적 생성은 빠르고 SEO에 유리하지만, 매번 새로운 데이터를 가져와야 한다면 적합하지 않습니다. 서버사이드 렌더링은 데이터를 가져오는 방식에 따라 서버 비용이 높아질 수 있으며, 초기 로딩 속도도 느릴 수 있습니다. 클라이언트사이드 렌더링은 초기 로딩 속도가 빠르지만, SEO에 불리할 수 있으며, 브라우저에서 데이터를 처리하기 때문에 브라우저의 성능에 따라 다를 수 있습니다.
이렇게 Next.js에서는 데이터를 가져오는 방식에 따라 세 가지 유형이 있으며, 각각의 방식은 장단점이 있습니다. 따라서, 개발자는 상황에 맞게 적절한 방식을 선택하여 데이터를 가져와야 합니다.
API 데이터 패칭
Next.js에서 API 라우트를 사용하면 서버에서 데이터를 가져올 수 있습니다. API 라우트는 클라이언트 측 JavaScript 코드에서 서버 측 데이터에 액세스할 수 있는 API를 만들어줍니다.
예를 들어, 서버에서 데이터베이스에 저장된 사용자 정보를 가져와야 하는 경우, API 라우트를 사용하여 데이터를 가져올 수 있습니다. 다음은 API 라우트를 사용하여 데이터를 가져오는 간단한 예제 코드입니다.
pages/api/users.js 파일:
export default function handler(req, res) {
const users = [
{ id: 1, name: "홍길동" },
{ id: 2, name: "김철수" },
{ id: 3, name: "이영희" },
];
res.status(200).json(users);
}
위 코드에서, handler 함수는 /api/users 경로로 들어오는 모든 요청을 처리합니다. 이 함수는 서버에서 사용자 정보를 생성하고, res.status(200).json(users)를 사용하여 해당 정보를 JSON 형식으로 반환합니다.
이제 클라이언트 측에서 API 라우트를 호출하여 데이터를 가져올 수 있습니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.
pages/index.js 파일:
import { useState, useEffect } from "react";
function Home() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h1>사용자 목록</h1>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default Home;
위 코드에서, useEffect hook을 사용하여 페이지가 로드될 때 API 라우트에서 데이터를 가져옵니다. fetch 함수를 사용하여 /api/users 경로로 요청을 보내고, 반환된 데이터를 setUsers 함수를 사용하여 users 변수에 저장합니다. 이후, 저장된 사용자 정보를 리스트 형식으로 화면에 표시합니다.
이렇게 API 라우트를 사용하면, 서버에서 데이터를 가져와 클라이언트 측에서 화면에 표시할 수 있습니다. 이는 서버 측 데이터를 사용하여 다양한 기능을 구현할 때 유용합니다.
서버 사이드 렌더링 이용 데이터 표시
서버 사이드 렌더링은 웹 페이지의 초기 로딩 속도를 개선하고, 검색 엔진 최적화(SEO)를 향상시키는 방법입니다. 일반적인 웹 사이트는 클라이언트 측에서 HTML을 생성하고, 데이터를 가져와서 화면에 표시합니다. 하지만 서버 사이드 렌더링을 사용하면, 서버에서 HTML을 생성하고 필요한 데이터를 미리 가져와서 HTML에 포함시킵니다.
예를 들어, 사용자가 방문한 페이지에 따라 다른 데이터를 로드해야 할 경우, 서버 사이드 렌더링을 사용하여 해당 데이터를 미리 가져와서 화면에 표시할 수 있습니다. 이렇게 하면 사용자가 페이지를 로드할 때 데이터를 가져오는 시간을 줄일 수 있으며, 페이지 로딩 시간을 개선할 수 있습니다.
다음은 Next.js에서 서버 사이드 렌더링을 사용하여 데이터를 표시하는 예제 코드입니다.
pages/index.js 파일:
import fetch from "isomorphic-unfetch";
function Home(props) {
return (
<div>
<h1>{props.title}</h1>
<ul>
{props.users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
Home.getInitialProps = async function () {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await res.json();
return {
title: "사용자 목록",
users: data,
};
};
export default Home;
위 코드에서, Home 컴포넌트에서 props를 사용하여 데이터를 표시합니다. getInitialProps 함수는 서버에서 페이지를 렌더링하기 전에 실행되어 데이터를 가져옵니다. 이 함수에서는 fetch 함수를 사용하여 https://jsonplaceholder.typicode.com/users 경로로 요청을 보내고, 반환된 데이터를 props에 저장합니다.
서버 사이드 렌더링은 클라이언트 측에서 데이터를 가져오는 방법과 다르게 동작합니다. 이 방법을 사용하면 초기 로딩 속도가 개선되며, SEO에도 더욱 유리합니다. 다만, 서버 측에서 데이터를 가져오기 때문에 클라이언트 측에서 데이터를 가져오는 방법과는 다른 점에 유의해야 합니다.
자 이제 Next.js에서 스타일링을 하는 방법에 대해서 배우겠습니다.
Styling options in Next.js
CSS modules in Next.js
Styled JSX in Next.js
Styling Next.js
(공식 도큐먼트를 참고하면서 익히시는 것을 추천합니다)
Next.js에서는 다양한 스타일링 옵션을 제공합니다. 이 중에서 가장 일반적인 스타일링 방식은 CSS 파일을 생성하고 페이지에서 해당 파일을 로드하는 것입니다. 이 방식은 전통적인 웹 개발에서 사용되는 방법이며, CSS 파일을 직접 수정하여 페이지의 스타일을 변경할 수 있습니다.
Next.js에서는 CSS 파일을 직접 작성하는 것 외에도 다른 스타일링 옵션도 있습니다. 가장 간단한 방법은 인라인 스타일링입니다. 이 방식은 스타일링이 필요한 요소에 직접 스타일을 지정하는 것입니다. 이 방법은 간단하지만, 스타일링을 반복해서 적용해야 하는 경우에는 유지보수가 어려울 수 있습니다.
다른 스타일링 옵션으로는 CSS 모듈, styled-components, Emotion 등의 라이브러리를 사용하는 것도 있습니다. 이들은 각각 다른 방식으로 스타일링을 제공하며, 개발자가 선호하는 방식을 선택할 수 있습니다.
CSS 모듈은 CSS 파일을 모듈화하여 클래스 이름 충돌을 방지하고, 각 요소에 대한 스타일링 클래스를 자동으로 생성합니다. 이 방식은 유지보수가 쉬우며, 스타일링이 반복해서 적용되는 경우에도 유용합니다.
styled-components와 Emotion은 CSS를 JavaScript로 작성하는 방식입니다. 이 방법은 스타일링과 관련된 JavaScript 코드를 작성하여, 스타일링을 직접 적용할 수 있습니다. 이 방식은 컴포넌트 단위로 스타일링을 적용하는 데 유용합니다.
이러한 스타일링 옵션 중에서도 가장 일반적으로 사용되는 것은 CSS 파일을 생성하는 방식입니다. 이 방식은 전통적인 웹 개발에서 사용되는 방법이며, 대부분의 개발자들이 익숙합니다. 하지만 다른 방식도 사용할 수 있으며, 개발자가 스타일링에 대한 선호도에 따라 선택할 수 있습니다.
그중에서 저는 Styled JSX에 대해서 설명해보도록 하겠습니다.
Styled JSX
Styled JSX는 Next.js에서 제공하는 스타일링 옵션 중 하나입니다. 이 방식은 React 컴포넌트 안에서 CSS를 작성하는 것을 가능하게 합니다.
Styled JSX는 CSS와 유사한 문법을 사용합니다. 예를 들어, 백틱(`)으로 감싸진 문자열 안에 CSS 스타일 규칙을 작성할 수 있습니다. 이 때, 괄호({})를 사용하여 JavaScript 표현식을 포함시킬 수 있습니다. 이렇게 작성된 스타일은 컴포넌트의 JSX 요소에 적용됩니다.
예를 들어, 다음은 Styled JSX를 사용하여 h1 태그를 스타일링하는 예시입니다.
function Title() {
return (
<div>
<h1 className="title">Hello, World!</h1>
<style jsx>{`
.title {
font-size: 3em;
color: blue;
}
`}</style>
</div>
)
}
위 코드에서는 h1 태그에 className 속성으로 "title"을 지정하고, 백틱(`) 안에 CSS 스타일 규칙을 작성하여 "title" 클래스에 스타일을 적용합니다.
이때,
<style jsx>
태그를 사용하여 Styled JSX를 적용한다는 것을 나타냅니다.
Styled JSX는 다른 스타일링 옵션과 비교하여 가독성이 좋으며, CSS와 JavaScript를 함께 사용할 수 있습니다. 또한 컴포넌트 스코프 내에서 스타일링이 이루어지기 때문에 클래스 이름 충돌을 방지할 수 있습니다. 이러한 이유로 Styled JSX는 Next.js에서 많이 사용되는 스타일링 방식 중 하나라고 할 수 있습니다.
Next.js + Tailwind CSS
사실 스타일링 (CSS)에 드는 시간을 많이 아끼려면 Tailwind CSS를 사용하는 것도 정말 좋은 방법이라고 생각합니다. (사실 저는 Tailwind CSS로 베이직 디자인 레이아웃을 잡으려고 노력합니다.)
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
위 링크는 NExt.js에 Tailwind CSS를 구현하는 깃허브 가이드입니다.
솔직히 Tailwind CSS 사용을 적극 추천하는 바입니다! :)
다음 포스팅은 Next.js에서의 Building and Deployment에 대해서 알아보도록 할게요.
Building a Next.js app for production
Deploying a Next.js app to a hosting service
Performance optimization for Next.js apps
