NextJS에서 컴포넌트의 공유 데이터

여러 컴포넌트가 동일한 데이터에 액세스해야 하는 상황이 있습니다. 예를 들어, 사용자 배열이 있다고 가정해 보겠습니다. 한 라우트에서는 사용자 목록을 표시하고, 동적 매개변수가 있는 다른 라우트에서는 사용자의 id에 따라 특정 사용자의 설명을 표시하려고 합니다.

설명한 내용을 구현해 보겠습니다. 다음 파일 구조를 만들어 보겠습니다:

/app/
- /users/
  - users.js
  - /list/
    - page.jsx
  - /show/[id]/
    - page.jsx

사용자 데이터를 별도의 파일로 만들어 보겠습니다:

export default users = [
	{
		id: 1,
		name: 'name1',
		surn: 'surn1',
	},
	{
		id: 2,
		name: 'name2',
		surn: 'surn2',
	},
	{
		id: 3,
		name: 'name3',
		surn: 'surn3',
	},
];

사용자 목록을 표시하는 컴포넌트를 만들어 보겠습니다:

import users from '../users.js';

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

사용자의 id에 따라 특정 사용자를 출력하는 컴포넌트를 만들어 보겠습니다:

import users from '../../users.js';

export default function User({params}) {
	let user = users[params.id];
	
	return <div>
		<span>{user.id}</span>
		<span>{user.name}</span>
		<span>{user.surn}</span>
	</div>;
}

다음 배열이 주어졌습니다:

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

두 개의 컴포넌트를 만드세요. 첫 번째 컴포넌트는 제품 목록을 표시하고, 두 번째 컴포넌트는 제품에 대한 상세 설명을 표시하도록 합니다.