[React.js] 라이프사이클(LifeCycle)

라이프 사이클이란

우리말로 생애 주기 라고 한다.

리액트에는 Mount, Update, UnMount 라는 3가지로 구분되는 라이프 사인클을 갖는다.

 

Mount

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

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

 

Update

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

- 리렌더링 될 때를 의미

 

UnMount 

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

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

 

LifeCycle은 useEffect를 사용하여 구현 할 수 있다.

 

useEffect

리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook

리액트의 사이드 이펙트란 컴포넌트의 동작에 따라 파생되는 여러 효과

 

동작                                                         사이드 이펙트

컴포넌트 내부의 값 변경           →          콘솔이 변경된 값 출력

컴포넌트 마운트                        →          콘솔에"Mount" 라고 출력

컴포넌트 업데이트(리렌더)       →          콘솔에"Update" 라고 출력

컴포넌트 언마운트                    →          콘솔에"Unmount"라고 출력

 

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

useEffect 문법

첫번째 인수로는 콜백 함수를 넣고, 두번째 인수에 배열을 넣으면 된다.

useEffect는 두번째 인수로 전달한 배열의 값이 바뀌게되면 사이드 이펙트로서

첫번째 인수로 전달한 콜백함수를 실행 하게된다.

 

useEffect(() => {

    console.log(`count: ${count}`);

  }, [count]);

 

count가 변경될때 마다

두번째 인수인 count값이 바뀔때 마다

첫번째 인수 콜백 함수를 실행시켜

consol에 count 값이 찍히는것을 볼 수 있다.

useEffect는 두번째 인수에 의존을 하게된다.

이배열을 의존성 배열(dependency array : deps)이라 한다.

 

하나 이상의 값을 사이드 이펙트를 더 추가 하고싶다 하면

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);

  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)

        }}/>

      </section>

      <section>

        <Viewer count={count} />

      </section>

      <section>

        <Controller onClickButton={onClickButton} />

      </section>

    </div>

  );

}

export default App;

 useEffect 두번째 인수 배열에 변수하나를 더 추가하면된다.

count와 input의 consol.log를 찍게된다.

 

useEffect로 라이프사이클 제어

// 1.마운트 : 탄생

  useEffect(()=>{

    console.log("mount");

  },[])

컴포넌트가 마운트 되었을때 최초로 한번 실행시키고 싶은 코드가 있다면

useEffect를 호출하고 뎁스로는 빈배열을 전달하면된다.

// 2.업데이트 : 변화, 리렌더링

  useEffect(() => {

    console.log("update");

  });

컴포넌트가 리렌더링 될때마다 실핼시키고 싶은 코드가 있다면

useEffect를 호출하고 뎁스를 지우면 컴포넌트가 리렌더링 될때마다 useEffect를 호출하게 된다.

처음 컴포넌트를 렌더링 할때 업데이트로 주었던 useEffect가 실행되게 되는데

Mount할때 업데이트 useEffect를 실행시키고 싶지 않다면

const isMount = useRef(false);

// 2.업데이트 : 변화, 리렌더링

  useEffect(() => {

    if (!isMount.current) {

      isMount.current = true;

      return;

    }

    console.log("update");

  });

이런식으로 코드르 짜주면 된다.

그러면 이렇게 컴포넌트를 리렌더링 할때만 업데이트 useEffect가 실행되게 된다.

<section>

        <Viewer count={count} />

        {count % 2 === 0 ? <Even /> : null}

      </section>

      <section>

        <Controller onClickButton={onClickButton} />

      </section>

 

import { useEffect } from "react";

const Even = () => {

  useEffect(() => {

    // 클린업, 정리함수

    return () => {

      console.log("unmount");

    };

  }, []);

  return <div>짝수입니다</div>;

};

export default Even;

 

useEffect 뎁스를 빈배열로 전달을 하고

함수안에 리턴 함수를 만든다 이것을 클린업, 정리함수라 한다.

정리함수에 로그를 찍어보면 짝수입니다 컴포넌트가 사라질때

로그에 unmount가 찍히게 된다.