[Project-감정 일기] 일기 작성

알게된 것

1. 홈으로이동 후 뒤로가기 막아줄 수 있다
2. className으로 클릭한 아이템 알아내기

1. 컴포넌트화

• 새글 작성 페이지와 수정 페이지가 동일한 모양을 갖으니 컴포넌트화를 시켜준다.

2. 날짜 선택

• 인풋에 초기값으로 오늘날짜를 넣어줌

3. 감정 선택

• map을 이용하여 아이템을 순회하면서 선택 된 아이템의 className과 나머지의 className을 설정해주어 해당 아이템에만 효과를 줄 수 있음

  <EmotionItem
                  key={it.emotion_id}
                  {...it}
                  onClick={handleClickEmote}
                  isSelected={it.emotion_id === emotion}
                />

  className={[
          "EmotionItem",
          isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
        ].join(" ")}

  => 배열로 className을 정렬하고 join(' ')을 통해 문자열로 바꿔준다

4. 글 작성 / 버튼 / useRef

• 뒤로가기 : navigate(-1)
• <textarea> 가 빈칸이면 작성완료 눌렀을 때 useRef를 이용하여 focus() 해줌
• navigate( '/', { replace: true }); : 글 작성 완료 후 홈으로 가지고, 뒤로가기를 막아줌

공부하며 정리&기록하는 ._. 씅로그