라이프 사이클(useEffect)

 

리액트 컴포넌트에도 라이프 사이클이 있다.

 

Mount

 - like. 탄생

 - 컴포넌트가 탄생하는 순간

 - 화면에 처음 렌더링 되는 순간

"A컴포넌트가 Mount 되었다!" → A 컴포넌트가 화면에 처음으로 렌더링 되었다.

 

Update

 - like. 변화

 - 컴포넌트가 다시 렌더링되는 순간

 - 리렌더링 될 때를 의미

"A 컴포넌트가 업데이트 되었다!" → "A 컴포넌트가 리렌더링 되었다."

 

UnMount

 - like. 죽음

 - 컴포넌트가 화면에서 사라지는 순간

 - 렌더링에서 제외되는 순간

 "A 컴포넌트가 언마운트 되었다!" → "A 컴포넌트가 화면에서 사라졌다."

 

 

 

💡 라이프 사이클 제어

컴포넌트의 라이프 사이클의 단계별로 컴포넌트들이 각각 다른 작업을 수행하도록 한다.

 

 

---

 

7.2) useEffect 사용하기

- 라이프 사이클 제어하는게 useEffect이다.

💡 useEffect
리액트 컴포넌트의 사이드 이펙트(부작용, 부수적인 효과, 파생되는 효과)를 제어하는 새로운 React Hook

컴포넌트의 동작에 따라 파생되는 여러 효과

 

 

컴포넌트의 어떤 값이 변경되었을 때 현재 어떤 값이 어떻게 바뀌었는지 출력해준다는 등 라이프 사이클을 제어하는 것이 사이드 이펙트이다.

그래서 결록적으로 useEffect를 사용하면 이런 라이프 사이클을 제어할 수 있다.(Mount, Update, Unmount 때 특정 코드를 실행시키는 것을 만들 수 있다.) 

 

 

 

 

 

 

💡의존성 배열(dependency array, 줄여서 deps라고 부른다.)

  useEffect(() => {
    console.log(`count: ${count} / input: ${input}`);
  }, [count, input]);
  // [count]에 의존하여 값이 바뀐다. "의존성 배열"이라 부른다.
  // dependency array, 줄여서 deps라고 부른다.​

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

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

  const onClickButton = (value) => {
    setCount(count + value); // setCount가 불러진거지, 실제로 state값이 변경된 것은 아님..
    // 변경된 state의 값은 비동기로 업데이트가 되기 때문에, state값을 바로 사용해서 side effect에 해당하는 부가적인 작업을 여기서 진행하려고 하면 안된다.(=> 바로 부가적인 작업을 하고 싶다면 useEffect에서 사용해야한다.)
    // console.log("count: " + count);
  };

  useEffect(() => {
    console.log(`count: ${count} / input: ${input}`);
  }, [count, input]);
  // [count]에 의존하여 값이 바뀐다. "의존성 배열"이라 부른다.
  // dependency array, 줄여서 deps라고 부른다.

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <input
        value={input}
        onChange={(e) => {
          onChange(e.target.value);
        }}
      />
      <section>
        <Viewer count={count} />
      </section>

      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

 

 

 

---

 

7.3) userEffect로 라이프사이클 제어하기

 

1. mount

deps에 빈 배열을 넣어두면, 컴포넌트가 처음 mount될 때 실행되고 이후에는 다시 실행되지 않는다.

  useEffect(() => {
    console.log("mount")
  }, []);

 

 

2. update

deps를 비워둘 경우, 리렌더링 될 때 마다 실행한다.

  const isMount = useRef(false);

  // 2. 업데이트: 변화, 리렌더링
  // deps를 생략하면, 리렌더링 될 때마다 실행된다.
  // 만약, 처음에는 실행시키지 않고, 진짜 컴포넌트 업데이트 단계에서만 코드를 실행시키고 싶다면, 레퍼런스 객체를 하나 생성해서 플래그로서 사용하면 된다.
  useEffect(() => {
    if (!isMount.current) {
      // false라면
      isMount.current = true;
      return;
    }
    console.log("update");
  });

 

 

 

 

 

 

3. unmount

useEffect의 return 안은 unmount될 때 실행된다.

 

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    // 클린업, 정리함수: return안에 / useEffect가 끝날 때 실행됨.
    return () => {
      console.log("unmount");
    };
  });

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

export default Even;

 

App.jsx

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <input
        value={input}
        onChange={(e) => {
          onChange(e.target.value);
        }}
      />
      <section>
        <Viewer count={count} />
        {count % 2 === 0 ? <Even /> : null}  // 여기에 Even이 사라질 때(unmount)를 적어둠..
      </section>

      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );

 

 

 

---

 

전체 코드

App.jsx

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

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

  const isMount = useRef(false);

  // 1. 마운트: 탄생
  useEffect(() => {
    console.log("mount");
  }, []);

  // 2. 업데이트: 변화, 리렌더링
  // deps를 생략하면, 리렌더링 될 때마다 실행된다.
  // 만약, 처음에는 실행시키지 않고, 진짜 컴포넌트 업데이트 단계에서만 코드를 실행시키고 싶다면, 레퍼런스 객체를 하나 생성해서 플래그로서 사용하면 된다.
  useEffect(() => {
    if (!isMount.current) {
      // false라면
      isMount.current = true;
      return;
    }
    console.log("update");
  });

  // 3. 언마운트 : 죽음
  // 짝수일 때만 화면에 나오게 할것임

  const onClickButton = (value) => {
    setCount(count + value);
  };

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <input
        value={input}
        onChange={(e) => {
          onChange(e.target.value);
        }}
      />
      <section>
        <Viewer count={count} />
        {count % 2 === 0 ? <Even /> : null}
      </section>

      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

 

 

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    // 클린업, 정리함수: return안에 / useEffect가 끝날 때 실행됨.
    return () => {
      console.log("unmount");
    };
  });

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

export default Even;

 

 

 

---

 

7.4) React 개발자 도구 사용하기

 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tools - Chrome 웹 스토어