일기 데이터 불러오기

useDiary 커스텀 훅

일기 데이터 접근

const data = useContext(DiaryStateContext);

• DiaryStateContext를 통해 전역에서 관리되는 일기 데이터에 접근

특정 일기 찾기

const [curDiaryItem, setCurDiaryItem] = useState<DiaryType>();

  useEffect(() => {
    const currentDiaryItem = data.find((item) => item.id === id);

    // 예외처리
    if (!currentDiaryItem) {
      toast.error("존재하지 않는 일기입니다 🫢");
      nav("/", { replace: true });
    }

    // 찾은 일기 데이터를 로컬 상태에 저장
    setCurDiaryItem(currentDiaryItem);
  }, [id, data, nav]);

  return curDiaryItem;
}

• 전달받은 id 매개변수를 사용해 특정 일기 찾기
• useEffect 훅을 사용하여 컴포넌트가 렌더링될 때 일기 데이터를 검색
• 예외 처리 : 해당 id의 일기가 존재하지 않을 경우, 사용자에게 알림을 보내고 다른 페이지로 리다이렉트
• 상태 관리 : 찾은 일기 데이터를 로컬 상태(curDiaryItem)에 저장하여, 컴포넌트에서 사용할 수 있도록 함

일기 상세보기

Diary 컴포넌트

일기 가져오기

const params = useParams();
const id = Number(params.id);
const nav = useNavigate();

const curDiaryItem = useDiary(id);  // useDiary 커스텀 훅 사용

const { createdDate, emotion, content } = curDiaryItem;

Viewer 연동

<Viewer emotion={emotion} content={content} />

Viewer 컴포넌트

export default function Viewer({ emotion, content }: ViewerProps) {

  return (
    <>
      // 감정
      <div>{emotionInfo[emotion].name}</div>

      // 일기내용
      <div>{content}</div>  
    </>
  );
}