노트 표시하기

이제 모든 노트 목록을 표시했으니, 노트를 보여주고 사용자가 편집할 수 있는 페이지를 만들어 보겠습니다.

가장 먼저 해야 할 일은 컨테이너가 로드될 때 노트를 불러오는 것입니다. Home 컨테이너에서 했던 것과 동일한 작업입니다. 그럼 시작해 보겠습니다.

라우트 추가하기

이제 우리가 만들 노트 페이지를 위한 라우트를 추가해 보겠습니다.

src/Routes.tsx 파일에서 /notes/new 라우트 아래에 다음 줄을 추가하세요.

<Route path="/notes/:id" element={<Notes />} />

이것은 URL에서 노트 ID를 추출하기 위해 패턴 매칭을 사용할 것이기 때문에 중요합니다.

/notes/:id 라우트 경로를 사용하면, 라우터가 모든 매칭되는 경로를 Notes 컴포넌트로 보내도록 지시합니다. 이는 /notes/new 경로도 id가 new인 것으로 매칭될 수 있습니다. 이를 방지하기 위해 패턴 매칭 라우트보다 먼저 /notes/new 라우트를 배치합니다.

그리고 헤더에 컴포넌트를 포함시킵니다.

import Notes from "./containers/Notes.tsx";

물론 이 컴포넌트는 아직 존재하지 않으며, 이제 우리가 만들 것입니다.

컨테이너 추가하기

새로운 파일 src/containers/Notes.tsx를 생성하고 다음 내용을 추가합니다.

import React, { useRef, useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { API, Storage } from "aws-amplify";
import { onError } from "../lib/errorLib";

export default function Notes() {
  const file = useRef<null | File>(null)
  const { id } = useParams();
  const nav = useNavigate();
  const [note, setNote] = useState(null);
  const [content, setContent] = useState("");

  useEffect(() => {
    function loadNote() {
      return API.get("notes", `/notes/${id}`, {});
    }

    async function onLoad() {
      try {
        const note = await loadNote();
        const { content, attachment } = note;

        if (attachment) {
          note.attachmentURL = await Storage.vault.get(attachment);
        }

        setContent(content);
        setNote(note);
      } catch (e) {
        onError(e);
      }
    }

    onLoad();
  }, [id]);

  return <div className="Notes"></div>;
}

여기서 몇 가지 작업을 수행합니다.

1. useEffect 훅을 사용해 컴포넌트가 처음 로드될 때 노트를 불러옵니다. 그런 다음 상태에 저장합니다. React Router의 useParams 훅을 사용해 URL에서 노트의 id를 가져옵니다. 이 id는 라우트(/notes/:id)의 패턴 매칭에 포함됩니다.

2. 첨부 파일이 있는 경우, S3에 업로드한 파일에 대한 보안 링크를 얻기 위해 키를 사용합니다. 그런 다음 이를 새로운 노트 객체에 note.attachmentURL로 저장합니다.

3. content와 attachmentURL과 함께 note 객체를 상태에 저장하는 이유는 사용자가 노트를 편집할 때 나중에 이를 사용하기 위함입니다.

이제 브라우저로 전환해 이전에 생성한 노트로 이동하면, 페이지가 빈 컨테이너를 렌더링하는 것을 확인할 수 있습니다.

다음으로, 방금 로드한 노트를 렌더링할 것입니다.