7.1) 라이프사이클(LifeCycle) = 생애주기

생애주기

• 라이프사이클 제어 : 각 단계별로 다른 작업을 하게 하는 것 => useEffect

Mount

• 컴포넌트가 탄생하는 순간
• 화면에 처음 렌더링 되는 순간
• "A 컴포넌트가 Mount 되었다"
• 활용 ex) 서버에서 데이터를 불러오는 작업

Update

• 컴포넌트가 다시 렌더링 되는 순간
• 리렌더링 될 때를 의미
• 활용 ex) 어떤 값이 변경되었는지 콘솔에 출력

UnMount

• 컴포넌트가 화면에서 사라지는 순간
• 렌더링에서 제외되는 순간을 의미
• 활용 ex) 컴포넌트가 사용하던 메모리 정리

7.2) useEffect 사용하기

useEffect

• 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook
  
• 문법 : useEffect(sideEffectFunction(), dependencyArray)
  • dependencyArray(의존성 배열, deps)이 변경되면 첫번째 인수로 입력된 함수를 실행함

App.jsx

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

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

  useEffect(() => {
    console.log(`count : ${count} / input : ${input}`);
  }, [count, input]);

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

export default App;

useEffect를 사용해야하는 이유

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

위와 같이 이벤트 리스너에 동작을 지정할 경우, 생각과 다른 동작이 나올 수 있다.
state값을 바꾸는 setCount(count + value)는 비동기로 동작하기 때문.
따라서 변경된 값을 이용해서 사이드 이펙트를 조절할 경우, useEffect를 활용해야한다.

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

App.jsx

import "./App.css";
import { useState, useEffect, useRef } from "react";

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

  const isMount = useRef(false);
  
  // 1. 마운트 : 탄생
  // 마운트 될 때 한 번만 실행되길 바라는 callback함수가 있을 경우
  // 아래처럼 callback함수를 첫 인수로 주고 빈 배열을 둘째 인수로 준다.
  useEffect(() => {
    console.log("mount");
  }, []);
  
  // 2. 업데이트 : 변화, 리렌더링
  // 아래는 mount 직후 update를 포함, 즉 화면 로딩후 무조건 한번 실행됨
  useEffect(() => {
  	console.log("update");
  });
  
  // 컴포넌트가 마운트 되고나서 업데이트 되는 순간에만 콜백함수를 실행하고 싶은 경우
  // 컴포넌트 마운트 여부를 체크하는 변수를 useRef를 이용해서 생성해주면 된다.
  useEffect(() => {
    if(!isMount.current) {
      isMount.current = true;
      return;
    }
  	console.log("update");
  });
  
  
  return (
    <div className="App">
      ...
      <section>
        <Viewer count={count} />
        {count % 2 == 0 ? <Even /> : null}
      </section>
      ...
    </div>
  );
}

export default App;

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    // 3. unmount
    // useEffect의 콜백 함수 안에서 리턴으로 새로운 함수 반환
    // = 클린업, 정리함수 = useEffect가 끝날 때 실행이 된다. = 언마운트 될 때
    return () => {
      console.log("unmount");
    };
  }, []);
  return <div>짝수입니다.</div>;
};

export default Even;

• 언마운트 => 성능 최적화 가능

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

React 개발자 도구

• 리액트 앱 개발 시 컴퍼넌트의 상태, 스테이트의 값, props로 넘어온 값 등을 쉽게 확인할 수 있도록 도와줌
• 크롬 확장 프로그램