6-7. React Lifecycle 제어하기 (useEffect)

LifeCycle이란?

depency를 잘 사용하면, 업데이트 한 것들을 잘 활용할 수 있다.

UseEffect사용방법

mount, update 사용

App.js

import { useRef, useState } from "react";
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";
import Lifecycle from "./Lifecycle";

const App = () => {
  // 전역적으로 Data 관리할 state
  const [data, setData] = useState([]);
  const dataId = useRef(0);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]); // 새로운 일기를 제일 위로 보내기 위해서
  };

  const onRemove = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다.`);
    // filter 기능을 통해 그 부분만 빼고 출력 된다.
    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
      )
    );
  };

  return (
    <div className="App">
      <Lifecycle />
      <DiaryEditor onCreate={onCreate} />
      <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} />
    </div>
  );
};

export default App;

Lifecycle.js

import React, { useEffect, useState } from "react";
const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("Mount!");
  }, []); //dependency array는 빈 배열로

  // component가 update되는 순간
  // state 변경, 부모에게서 받는 props가 바뀌거나, 부모 component가 rerendering 자기자신도 rerendering됨
  // rerendering되는 것은 component가 update된다는 말
  // state를 변경하는 순간을 useEffect로 제어, dependent array를 전달하지 않으면 된다.
  // component를 update하는 순간을 사용하려면, useEffect를 사용하면 된다.
  useEffect(() => {
    console.log("Update!");
  });

  // useEffect의 dependency array에 count를 전달하면
  // dependency값이 변화하면, 그 순간 callback함수가 수행이 된다.
  useEffect(() => {
    console.log(`count is update : ${count}`);
    if (count > 5) {
      alert("count가 5를 넘었습니다. 따라서 1로 초기화합니다.");
      setCount(1);
    }
  }, [count]);
  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

  return (
    <div style={{ padding: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};
export default Lifecycle;

 

Unmount기능

Lifecycle.js

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

const UnmountTest = () => {
  // component가 unmount되는 순간 제어
  useEffect(() => {
    console.log("Mount!");
    return () => {
      // Unmount 시점에 실행되게 됨
      console.log("Unmount!");
    };
  }, []);
  return <div>Unmount Testing Component</div>;
};

const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);
  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON/OFF</button>
      {/* isVisible이 true일때만 UnmountTest가 반환될 수 있도록(단락회로평가)
      단락 회로 평가
      단락 회로 평가 논리 연산자 (&& , ||) 를 사용하여 연산을 진행 할 때 좌측 식의 값에 따라 우측 식의 실행 여부를 판단하는 동작 */}
      {isVisible && <UnmountTest />}
    </div>
  );
};
export default Lifecycle;

단락회로 평가 출처

https://espania.tistory.com/332

[javascript] 단락 회로 평가 개념 및 활용 예제