(6).이정환_react.js강의_ React's LifeCycle과 역할, LifeCycle_Control방=>useEffect

React's LifeCycle의 정의와 각 Cycle 단계마다 제어담당

Mount -> Update(=ReRendering) -> UnMount

React's LifeCycle의 제어의 핵심은 useEffect로 다룬다.

useEffect의 정의 :

=> React에서 동작들에 따라 파생되는 효과 중 부작용을 제어하는 훅(Hook)이다.

useEffect 실습하기

1_ useEffect로 카운터 프로젝트에서 count값이 변경될때마다, console창에 count 값을 출력시켜보기

- App.js

import { useState, useEffect } from "react";//useEffect import 추가가
import Controller from "./components/Controller";
import Viewer from "./components/Viewer";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  //useEffect 구현
  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller count={count} onChangeCount={setCount} />
      </section>
    </div>
  );
}

export default App;

개념1_useEffect의 Argument : CallBack Method, [useState 변수들,,] : State 변수가 변할 때, callBack함수가 작동되도록 하는 useEffect

개념2_ 2번째 Argument인 배열 형태의 State 변수들이 []를 의존성 배열이라 한다.(더 자세히 알고싶은데, 안얄랴줌)

동작에 의한 State 변수의 값을 console창에 바로 확인하는 방법 => useEffect vs 핸들러에 console.log(state값)

- 핸들러에 console.log(state값) 으로 출력 확인 :

=> 카운트 값은 40인데, 업데이트 직전 값인 30이 console창에 출력된다.

이유 : useState의 setCoun()은 비동기적으로 실행되기 때문

2_ useEffect로 Mount상태의 React , Update 상태의 React , UnMount 상태의 React 구현해보기

● Mount상태의 React : useEffect 의 Argument 중 의존성 배열에 빈배열 => 처음 프로젝트 실행일 때만 콜백 수행

● Update 상태의 React : useEffect 의 Argument 중 의존성 배열 enpty => 업데이트 될때마다 콜백 수행

처음 실행될 때, Mount, Update가 둘다 출력된다는 것을 보이는데, 만약에 Mount 상태가 아닌 순수 Update 상태일 때만 'Update'를 출력시키고 싶다면,

=> useRef() 객체 이용

const isMount = useRef(false); //초기값 false

useEffect(()=>{
    if(!isMount.current)//isMount가 false로 왔다면, => Mount 단계의 직전인 상황임
    {
        //isMount만 true로 돌려놓고, 출력은 X
        isMount.current = true;
        return;//중요
    }

       console.log('Mount');//이제 Mount 상태일때만 출력이 된다
},)

● UnMount상태의 React :

★ ★ ★ ★ ★ ★ 알아야 할 구조 :

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

useEffect 콜백1 안에 return 콜백2 :

• 콜백1 : 매개인자가 업데이트 될 시, 작동된다.
• 콜백2 : 전체 상위 함수인 useEffect가 종료 될 시, 콜백2가 반환되면서, 작동된다.

따라서, Mount의 useEffect가 종료시, return 콜백에 UnMount 구현

useEffecr(()=>{
    console.log('Mount');

    return ()=>{console.log('UnMount')};

},[])

3_ Even 컴포넌트를 추가하고, Event의 Mount와 UnMount 각 상태 출력 코드 작성

- Even.js

import { useEffect } from "react";

function Even() {
  useEffect(() => {
    console.log("Even Mount");

    return () => {
      console.log("Even UnMount");
    };
  }, []);

  return <h3>짝수입니다.</h3>;
}

export default Even;

- App.js

import { useState, useEffect, useRef } from "react";
import Controller from "./components/Controller";
import Viewer from "./components/Viewer";
import "./App.css";
import Even from "./components/Even";

function App() {
  const [count, setCount] = useState(0);
  const isMount = useRef(false);
  //1. Mount_React
  useEffect(() => {
    //Mount일 떄, isMount.current 값 true로 전환
  }, []);

  //2. Update_React
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("Update");
  });

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
        {count % 2 === 0 ? <Even /> : null}
      </section>
      <section>
        <Controller count={count} onChangeCount={setCount} />
      </section>
    </div>
  );
}

export default App;