[ React, Remix, ts ] remix 에서 data import 하기

안녕하세요, 상훈입니다.

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 영상)을 참고하여 리스트를 출력해보았습니다.
(대신 하나 추가해서 따라해봤어요.)

data

내용 간단요약

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를 하게되었는데... 뭔소린지 하나도 모르겠어서 열심히 공부중입니다.....

화이팅.