[React.js] 라이프 사이클

라이프사이클이란?

LifeCycle = 생애주기

Mount

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

Update

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

UnMount

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

 

컴포넌트의 라이프 사이클 단계별로 컴포넌트들이 각각 다른 작업을 수행하도록 하는 것을 라이프사이클 제어라고 하는데, React Hook인 useEffect를 활용할 수 있다.

 

useEffect

리액트 텀포넌트의 사이드 이펙트를 제어하는 새로운 리액트 훅

사이드 이펙트 : 우리말로 부작용이라는 뜻이지만, 리액트에서는 "부수적인 효과", "파생되는 효과" 정도로 해석

 

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

 

 

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

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

  useEffect(() => {
    //콜백 실행
  }, [count, input]); 
  //변화를 감지할 값을 넣음
  //의존성 배열
  // dependency array
  // deps

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

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

export default App;

 

 

라이프사이클 제어하기

마운트

deps로 빈배열 넣으면 최초 실행될 때 한번만 동작함 

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

 

업데이트

리렌더링 될때마다 실행됨 

 useEffect(() => {});

 

useRef로 상태를 확인하여 제어하는 법

처음 마운트 될때는 건너뛰고 업데이트가 있을 때만 콜백 실행됨

const isMount = useRef(false);

useEffect(() => {
// false : 컴포넌트가 아직 마운트 되지 않은 상황
 if(!isMount.current) {
 isMount.,current = true;
 return;
 }
 });

 

언마운트

 useEffect(() => {
 //클린업, 정리함수 : 언마운트될때 호출됨
 return () => {};
 }, []);