클라우딩 어플리케이션 엔지니어링 TIL Day 36 - 감정 일기장 만들기 (5)

# Diary 컴포넌트 구현

Diary 컴포넌트 즉, 일기 상세 페이지를 구현해보자

우선 상세 내용을 보여줄 일기 데이터의 id 값을 받아와서 해당 id 값으로 일기 데이터를 가져와야 한다

useContext 를 사용해서 App 컴포넌트에 위치한 DiaryStateContext 가져오자

diaryList 라는 변수를 생성해서 해당 변수에 일기 데이터들을 담아주자

수정 구현과 마찬가지로 useEffect 를 사용해서 id 일치 여부를 확인한다

  useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );

      if (targetDiary) {
        setData(targetDiary);
      } else {
        alert("없는 일기입니다!");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

이제 일기 상세를 보여줄 컴포넌트를 구현해보자

데이터가 없을 때는 로딩 중임을 알려주고

데이터가 있을 때는 상세 페이지를 렌더링한다

코드의 전체적인 구조는 다음과 같다

  if (!data) {
    return <div className="DiaryPage">로딩중입니다...</div>;
  } else {
    return (
      <div>
        <h1>여기는 Diary</h1>
      </div>
    );
  }

 

# Diary  컴포넌트 Header

데모사이트의 헤더를 보고 구현해보자

우선 오늘의 날짜를 받아온 후 변환해서 헤더에 넣어주어야 한다

이전에 만들었던 DiaryEditor 컴포넌트의 getStringDate 함수를 가져다가 쓰면 되는데

이때 코드의 중복이 일어난다

중복되는 코드는

src 폴더 -> util 폴더 -> date.js 파일에 저장해서 필요시 import 해서 사용하자

emotionList 도 공통으로 사용되기 때문에 date.js 로 이동하자!

기존에 했던 방식과 동일하게 MyHeader 컴포넌트와 MyButton 컴포넌트를 재사용하여 헤더 생성하자

잘 완성되었다!

 

 date.js 로 옮겨주었던 emotionList를 꺼내와서 Diary 컴포넌트에서 사용해보자

const curEmotionData = emotionList.find(
      (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
    );

emotionList 의 id와 현재 emotion 상태를 비교해서 동일한 것을  찾는다

해당 내용을 화면에 렌더링되도록 해주면 된다

        <article>
          <section>
            <h4>오늘의 감정</h4>
            <div className="diary-img-wrapper">
              <img src={curEmotionData.emotion_img} />
              <div className="emotion-descript">
                {curEmotionData.emotion_descript}
              </div>
            </div>
          </section>
        </article>

css 까지 적용한 모습은?

최종 완성 모습은 아래와 같다

---

# React 흔히 발생 버그 수정

1. 일기 데이터 추가 시 id가 겹치는 버그

App 컴포넌트에서 dataId 를  useRef(0) 으로 받아오고 있기 때문이다

이미 기존에 dummyData가 1~5까지의 아이디를 가지고 있는데 useRef(0) 으로 설정해주면 다시 0부터 id를 생성하기 때문에 겹치게 된다

따라서 useRef(6) 으로 변경해야 한다

  const dataId = useRef(6);

겹치는 키가 발생했는지 확인하고 왜 발생했는지 고민하고 해결하는 과정이 필요하다

 

2. 오타

javascript에서 오타는 흔히 발생하는 실수이다

애초에 오타를 내지 않으면 좋지만 실수는 언제든지 할 수 있기에

typescript 로 해결해보자

 

3. 매달의 마지막 날에 일기 등록 시 렌더링이 안 되는 오류

lastDay의 수정이 필요하다

0시 0분 0초가 아닌

23시 59분 59초로 수정해야 한다!

  useEffect(() => {
    if (diaryList.length >= 1) {
      const firstDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth(),
        1
      ).getTime();
      const lastDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth() + 1,
        0,
        23,
        59,
        59
      ).getTime();

---

# 새로 알게 된 점

중복되는 코드는 따로 하나의 파일에 모아두고 import 하여 사용하면 코드의 가독성도 좋아지고

전체적인 구조를 쉽게 파악할 수 있다는 것을 배웠다

또한 이러한 코드를 처음에 분리하면 좋겠지만 개발하다가 알게 될 수도 있기 때문에

개발 중간에 옮기는 방법을 배운 것도 유익하였다

서비스의 가장 기본적인 기능인 CRUD를 이번 강의를 통해 배웠다

일기 등록, 수정, 삭제, 상세보기, 정렬 등 이번에 구현한 로직을 다시 한번 복습해서 완전히 나의 것으로 만들어야겠다