NextJS에서 데이터 가져오기

NextJS에서는 임의의 파일을 가져오고 내보낼 수 있습니다. 이것은 ES6 모듈로 작업해 본 적이 있다면 이미 할 수 있어야 합니다. 당연히 이것은 NextJS에서도 작동하지만, 초보자에게는 항상 명확하지는 않습니다. 그러므로 가져오기에 대해 이야기해 봅시다.

예를 들어 어떤 페이지가 있다고 가정해 봅시다. 이 페이지에서 우리는 몇 가지 데이터를 표시하고 싶습니다. 예를 들어, 일부 데이터가 담긴 배열이 있다고 가정해 봅시다. 이 데이터가 너무 커서 별도의 파일로 분리하는 것이 편리하다고 느껴집니다.

이 파일의 이름은 무엇이든 될 수 있습니다. data.js라고 합시다. 이 파일 안에 데이터 배열을 배치할 것입니다. 그리고 page.jsx 파일에는 NextJS 자체에 의해 처리되고 브라우저로 전송될 페이지가 있을 것입니다.

즉, 우리는 다음과 같은 파일 구조를 갖게 됩니다:

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

data.js 파일에 몇 가지 데이터 배열을 배치해 봅시다:

export default [
	1, 2, 3, 4, 5,
];

page.jsx 페이지를 만들어 봅시다:

export default function Test() {
	return <h1>Test</h1>;
}

데이터 배열을 페이지에 연결해 봅시다:

import data from './data.js';

export default function Test() {
	return <h1>Test</h1>;
}

반복문으로 이 데이터를 출력해 봅시다:

import data from './data.js';

export default function Test() {
	let list = data.map(function(item) {
		return <li>{item}</li>
	});
	
	return <>
		<h1>Test</h1>
		<ul>
			{list}
		</ul>
	</>;
}

다음 게시물 배열이 주어졌다고 가정합니다:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

이 제품들을 ul 목록 형태로 출력하세요.

다음 제품 배열이 주어졌다고 가정합니다:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

이 제품들을 HTML 테이블 형태로 출력하세요.