(23).이정환_react.js강의_감정일기장_프로젝트_9강_Diary 상세조회 페이지 구현 //util 폴더에 데이터 추출하여 사용하는 코드 작성, 저장

★ [hooks]폴더의 [useDiary.jsx]를 생성해, 커스텀 useHook 만들어, params.id를 넣을 시, diaries들 중 해당 id의 diary를 반환하는 메소드 작성하기

• useDiary.jsx

import { useContext, useEffect, useState } from "react";
import { DiaryStateContext } from "../App";
import { useNavigate } from "react-router-dom";


export const useDiary = (id) => {
  //StateContext에서 Diaries들 불러오기
  const diaries = useContext(DiaryStateContext);

  //찾았을 떄, 임시 보관할 diary 보관용 State 변수 초기화

  const [currentDiary, setCurrentDiary] = useState();

  //못찾았을 시에 뒤로 쫓아낼 nav 객체 호출
  const nav = useNavigate();

  //useEffect로 렌더링 낭비 방지
  useEffect(() => {
    //useEffect 내부에서, diaries를 잘 불러왔는 지 검사 => 배열인지와 undefined인지 체크
    if (!diaries || !Array.isArray(diaries)) return;
    //diary 일치 검사
    const findDiary = diaries.find((diary) => Number(diary.id) === Number(id));

    //없다면 , 뒤로꺼지게 하기
    if (!findDiary) {
      window.alert("존재하지 않는 일기입니다.");
      nav(-1, { replace: true });
    } else {
      setCurrentDiary(findDiary);
    }
  }, [id, diaries]);

  //찾은 최종 currentDiary반환
  return currentDiary;
};

★ 그리고, 사용할 곳에서는 useDiary() 반환값이 undefined면, 로딩중의 페이지 렌더링 하도록 하기

function Diary() {
  const params = useParams();
  const diary = useDiary(params.id);
  const nav = useNavigate();

  if (!diary) {
    // 데이터가 준비되지 않았다면 로딩 메시지를 출력
    return <div>로딩 중입니다...</div>;
  }

  ...
  .
  .

  .
  .
  .
    return (
    <div className="Diary">
      <Header
        leftChild={
          <Button
            text={"< 뒤로가기"}
            onClick={() => {
              nav(-1);
            }}
          />
        }
        title={`${new Date(
          Number(diary.createDate)
        ).toLocaleDateString()} 기록`}
        rightChild={
          <Button
            text={"수정하기"}
            onClick={() => {
              nav(`/edit/${params.id}`);
            }}
          />
        }
      />
      <DiaryBoard item={diary} />
    </div>
  );
}

export default Diary;