230712 EmotionDiary 복습

사실상 수정하기 기능 전까지는 기본 Diary와 같음

1. 수정하기 버튼 클릭 여부
   FALSE
   => 하단 버튼: 수정완료 / 수정취소
   TRUE
   => 하단 버튼: 삭제하기 / 수정하기

2. 수정완료 버튼
   => 수정 내용 null일 시 수정 불가
   FALSE/TRUE

상태변화 함수 useState()에 클릭 여부 표시하는 함수 담기

Root Foler:
YJ-github\GMA\YJ-React\230712\emotion_diary

🦝 useEffect():

컴포넌트가 새롭게 렌더링 될 때 출력
특정 배열(의존성배열)의 값이 변경될 때마다 콜백함수 작동
=> 의존성 배열이 없으면 렌더링마다 콜백 함수 작동
=> 빈 배열([])의 경우 최초 렌더링 후 콜백 함수 작동 X

Lifecycle.js

import React, { useState, useEffect } from 'react';

const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
    // useEffect(() => {
  //   console.log("mount");
  // })
  // useEffect(() => {
  //   console.log("mount");
  // }, [])
  // useEffect(() => {
  //   console.log("mount");
  // }, [count])
  useEffect(() => {
    console.log(`count is update: ${count}`);
    if (count > 5) {
      alert(`count가 5를 넘었습니다. 따라서 1로 초기화합니다.`);
      setCount(1);
    }
  }, [count])
  return (
    <div style={{ padding: 20 }}>
      <div>
        <div>{count}</div>
        <button onClick={() => setCount(count+1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => {setText(e.target.value)}} />
      </div>
    </div>
  )
}

export default Lifecycle