dependency에 있는 값이 변하지 않으면 콜백함수를 계속 재사용 할 수 있도록 해줌

(React.memo 이용할 때 prop으로 비정형화 데이터를 받을 때 주로 이용함)

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

DiaryEditor.js

item이 삭제 될 때는 해당 DiartyEditor가 리렌더링 되면 안되게 하기 위해서 React.memo를 사용했지만 리렌더링이 되는 현상이 일어남

→ 이는 prop으로 비정형화 데이터를 받기 때문

import React, { useEffect, useRef, useState } from "react";

const DiaryEditor = ({ onCreate }) => {
  useEffect(() => {
    console.log("DiaryEditor 렌더");
  });

  const authorInput = useRef();
  const contentInput = useRef();
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

  const handleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    if (state.author.length < 1) {
      // focus
      authorInput.current.focus();
      return;
    }

    if (state.content.length < 5) {
      // focus
      contentInput.current.focus();
      return;
    }
    console.log("확인 : ", state.author);
    onCreate(state.author, state.content, state.emotion);
    setState({
      author: "",
      content: "",
      emotion: 1,
    });
    alert("저장 성공");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        {/* 아래처럼 value에 저렇게 값을 넣으면 직접 키보드로 값 변경 x */}
        <input
          ref={authorInput}
          value={state.author}
          name="author"
          onChange={handleChangeState}
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          value={state.content}
          name="content"
          onChange={handleChangeState}
        />
      </div>
      <div>
        <select
          name="emotion"
          value={state.emotion}
          onChange={handleChangeState}
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  );
};
export default React.memo(DiaryEditor);

App.js

그래서 해당 비정형화 데이터인 해당 onCreate 함수를 useCallback으로 묶어서 해당 dependency가 변화되지 않을 때 실행이 안되도록 해야함

[ ] 를 입력하면 문제는 onCreate함수는 component가 mount되는 시점에 한번만 생성되기에 그 당시에 dataState 값이 [ ]이기 때문에 가장 마지막으로 생성됬을 때에 dataState도 [ ] 이 되서 기존꺼 다 날린 다음 새로 생성된 newItem만 들어옴 ( 그래서 현재의 state값을 참조할 수 있어야함 )

그래서 결론적으로 [data]를 입력해야 하는데 그런데 data 값이 변경되면 onCreate를 재생성 (최신의 dataState 값을 얻어야해서 ) 그래서 딜레마에 빠지게

→ 해결방법 : 함수형 업데이트

dependency에 [ ] 을 넣고 setData 함수에 객체 값을 넣는게 아니라 해당 객체 값을 return하는 화살표함수를 인자로 넣으면 됨 그러면 항상 최신의 state를 인자를 통해 참조할 수 있음!

import { useCallback, useMemo, useEffect, useRef, useState } from "react";
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";
import LifeCycle from "./Lifecycle";
// import OptimizeTest from "./OptimizeTest";

function App() {
  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const getData = async () => {
    const res = await fetch(
      "<https://jsonplaceholder.typicode.com/comments>"
    ).then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++,
      };
    });

    setData(initData);
  };

  useEffect(() => {
    getData();
  }, []);

  const onCreate = useCallback((author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1;
    // useCallback의 딜레마에 벗어나기 위해 함수에 인자로 함수를 전달하는 함수형 업데이트 이용
    // newItem을 추가한 data를 return해주는 것을 전달한 것
    // 이렇게 사용하면 dependecy 인자에 data를 안넣고 비울 수 있음
    // -> 항상 최신의 state를 인자를 통해서 참고할 수 있음
    setData((data) => [newItem, ...data]); //원래 데이터 를 가져오고 새로운 item은 최상단에 나오도록 함
  }, []);

  const onDelete = (targetId) => {
    // filter 이용해서 삭제할 Id에 대한 일기 빼고 해당 객체 리스트 가져옴
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };

  const onEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };

  const getDiaryAnalysis = useMemo(() => {
    const goodCount = data.filter((it) => it.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
    return { goodCount, badCount, goodRatio };
  }, [data.length]);

  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

  return (
    <div className="App">
      {/* <LifeCycle /> */}
      {/* <OptimizeTest /> */}
      <DiaryEditor onCreate={onCreate} />
      <div>전체 일기 : {data.length}</div>
      <div>기분 좋은 일기 개수 : {goodCount}</div>
      <div>기분 나쁜 일기 개수 : {badCount}</div>
      <div>기분 좋은 일기 비율 : {goodRatio}</div>
      <DiaryList onEdit={onEdit} onDelete={onDelete} diaryList={data} />
    </div>
  );
}

export default App;