안녕하세요, 상훈입니다.
React.js + remix + typeScript 에서 data를 load 하는 내용을 포스팅 (이라 쓰고 기록을 한다.)을 하도록 하겠습니다.
<Link to="/"> </Link>
태그에 관한 내용을 반복문 map을 이용하여 목록으로 표시하려고합니다.
전체적인 설명은 아래 이미지있는 곳에서 하도록하겠습니다.
전체코드1.
import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node'
import { Link, useLoaderData } from '@remix-run/react'
import { getLists, getPosts } from "~/models/posts.server"
//type 선언
type LoaderData = {
posts: Awaited<ReturnType<typeof getPosts>>,
lists: Awaited<ReturnType<typeof getLists>>
}
export const loader: LoaderFunction = async () => {
const posts = await getPosts()
const lists = await getLists()
return json<LoaderData>({posts, lists})
}
export default function PostRoute () {
const { posts,lists } = useLoaderData() as LoaderData
return (
<main>
<h1>Posts!</h1>
{posts.map((post) => (
<li key={post.slug}>
<Link to={post.slug} className="text-blue-600 underline">
{post.title}
</Link>
</li>
))}
{lists.map((list) => (
<li key={list.mapper}>
<Link to={list.mapper}>
{list.title}
</Link>
</li>
))}
</main>
)
}
전체코드2 - data
import {prisma} from '~/db.server'
export async function getPosts () {
const posts = [
{
slug: 'my-first-post',
title: 'My First Post!'
},
{
slug: 'trail-riding-with-onewheel',
title: 'Trail Riding with Onewheel'
}
]
return posts
}
export async function getLists () {
const lists = [
{
title: 'First Title',
mapper: 'frist-title',
},
{
title: 'Second Title',
mapper: 'second-title',
}
]
return lists
}
기존 영상(Remix Tutorial 영상)을 참고하여 리스트를 출력해보았습니다.
(대신 하나 추가해서 따라해봤어요.)
Remix 에서 데이터를 컴포넌트에 불러오는 방식을 위와같이 합니다.
저 loader 함수는 클라이언트가 볼 수 없는 함수가 됩니다. ==> remix의 장점
1) useLoaderData 라는 remix 훅을 import 합니다.
2) loader 라는 이름의 함수를 생성하여 그 내부에서 데이터를 불러옵니다. (async await 부분)
3) LoaderData 라는 형식을 선언해줍니다. (type LoaderData)
4) loader 함수 내에서 LoaderData 타입으로 데이터를 반환한다고 말합니다.
(--- json 이라는 라이브러리를 import 합니다.)
5) 데이터를 호출할 때 useLoaderData 함수를 LoaderData 형식으로 선언한다고 합니다.
엄청 왔다갔다 했네요. 이제 다 왔습니다.
데이터만 뿌려주면 되네요.
map 이용하여 데이터를 loop 돌리도록 하겠습니다.
사이드 프로젝트를 하게되어 remix, react.js, typescript를 하게되었는데... 뭔소린지 하나도 모르겠어서 열심히 공부중입니다.....
화이팅.
반응형
'FrontEnd > React.js' 카테고리의 다른 글
| [ React.js ] 에러해결 / Too many re-renders. React limits the number of renders to prevent an infinite loop. (0) | 2023.02.07 |
|---|---|
| [Remix, React] 개별 css 파일 import 하는 방법 (0) | 2022.12.25 |
| [ RN, Expo ] 리액트네이티브, Expo, 안드로이드 로그인 연동 - sha-1 코드 얻는 방법 (0) | 2022.10.02 |
| ReactNative + Expo / expo start --android / 에러 해결 (0) | 2022.10.01 |
| [IT도서리뷰] 소플의 처음 만난 리액트 (0) | 2022.06.26 |
