• alert를 주는 것은 좋지 않은 UI
• 그 대신 focus를 주는 방식으로 전개해나가는 것이 좋음.

useRef

html 돔요소에 접근할 수 있는 useRef 기능을 통해서 focus 기능을 만들 수 있음.

• 레퍼런스 객체, 즉, 돔요소를 선택하는 useRef라는 기능으로 생성한 레퍼런스 객체는 현재 가리키는 값을 current라는 프로퍼티로 불러와서 사용할 수 있음.
• authorInput은 현재 input값을 가리키고 있게 되는 것임. return 부분의 input 에 ref = {authorInput}을 할당해줬기 때문임.

import { useRef, useState } from "react";

const DiaryEditor = () => {
  const authorInput = useRef();
  
  const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();
      //레퍼런스 객체, 즉, 돔요소를 선택하는 useRef라는 기능으로 생성한 레퍼런스 객체는 현재 가리키는 값을 current라는 프로퍼티로 불러와서 사용할 수 있음.
      return;
    }

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput} // input 태그 돔에 접근할 수 있게 됨.
          ...
          

변수명.defaultProps = {props: 디폴트값}

• props가 전달되지 않았을 때 어떤 값을 출력할 것인지 정해주는 것.

DiaryList.defaultProps = {
diaryList: [],
};

해당리스트를 별도의 컴포넌트로 저장하는 방법

• diaryList와 diaryItem을 분리하여 사용
• diaryItem에 props를 내려주기 위하여 {...it}으로 스프레드 연산자를 써줌.

import DiaryItem from "./DiaryItem";

const DiaryList = ({ diaryList }) => {
  console.log(diaryList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
          //   <div key={it.id}>
          //     <div>작성자: {it.author}</div>
          //     <div>일기: {it.content}</div>
          //     <div>감정: {it.emotion}</div>
          //     <div>작성시간(ms): {it.createDate}</div>
          //   </div>
        ))}
      </div>
    </div>
  );
};