[React] 라이프 사이클과 제어(useEffect)

Lifecylcle

---

Source : https://medium.com/@itsanuragjoshi/understanding-react-component-lifecycle-class-vs-functional-components-d1d6a974deda

• 마운트 : 첫 렌더링할 때
• 업데이트 : 리렌더링될 때
• 언마운트 : 더이상 렌더링하지 않을 때

 

useEffect

---

: 어떤 값이 변경될 때마다 특정 코드를 실행하는 훅, 특정 값 검사

useEffect(callback, [deps?]) //콜백함수, 의존성 배열

첫번째 인자 : 수행하고자 하는 작업

두번째 인자 : 검사하고자하는 특정 값 or 빈 배열

 

마운트 제어 (컴포넌트가 처음 렌더링될 때)

---

: 두번째 인자 빈 배열[]일 때 마운트 (처음 렌더링) 시에만 콜백함수 실행

useEffect(() => {
  console.log("컴포넌트가 처음 렌더링될 때 실행");
}, []);

 

props가 변경되어도 다시 실행X

-주요 사용

• 1회 실행 로직(초기화 코드, 로그 출력, 타이머 설정)
• 초기 데이터 로드

useEffect(() => {
    fetch("https://api.example.com/data")
    .then(res => res.json)
    .then(data => console.log(data));
}, []);

• 구독 설정 및 해제

useEffect(() => {
  const subscription = someEvent.subscribe(() => {
    console.log("구독 이벤트 발생!");
  });

  return () => {
    // 컴포넌트 언마운트 시 정리
    subscription.unsubscribe();
    console.log("구독 해제");
  };
}, []);

 

업데이트 제어 (컴포넌트가 리렌더링될 때) : 값 검사

---

: 두번째 인자 [값] 일 시, 배열 안의 값들이 변할 때마다 useEffect가 실행

useEffect(() => {
  console.log("counter 변경될때마다 실행");
}, [counter]);

counter 값이 업데이트될 때마다 useEffect가 호출

const [counter, setCounter] = useState(0);
const [name, setName] = useState("애옹");

useEffect(() => {
  console.log("counter 또는 name이 변경될 때마다 실행");
}, [counter, name]);

두 값 중 하나라도 변경되면 useEffect가 실행

 

언마운트 제어 (컴포넌트가 언마운트될 때) : 클린업

---

클린업 함수를 사용하여 자원을 정리

useEffect(() => {
  console.log("컴포넌트가 마운트될 때 실행");

  // 언마운트 시 실행될 클린업 함수
  return () => {
    console.log("컴포넌트가 언마운트될 때 실행");
  };
}, []); // 빈 배열을 넣으면 마운트 시 실행되고, 언마운트 시 클린업 함수 실행

 

useEffect에서 반환하는 함수는 언마운트 될 때 실행

 

💡간단정리

마운트 제어	useEffect(() => { ... }, []);
업데이트 제어	useEffect(() => { ... }, [의존성 배열]);
언마운트 제어	useEffect(() => { return () => { ... }; }, []);

 

사용

마운트,업데이트 제어

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0)
  const [keyword, setKeyword] = useState("");
  const onClick = () =>setValue((prev) => prev+1);
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => {
    console.log("컴포넌트가 처음 렌더링될 때만 실행");
  }, []);

  useEffect(()=>{
    console.log("counter 변경될때마다 실행");
  }, [counter]);
  
  useEffect(()=>{
    console.log("counter 또는 keyword 변경될때마다 실행");
  }, [counter, keyword]);


  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here..."></input>
    </div>
  );
}

export default App;

 

 

언마운트 제어

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("Created ^o^"); //마운트시 실행
    return () => { console.log("Destroyed ㅜ_ㅜ"); }; //언마운트시 실행
  }, []);

  return <h1>hello</h1>
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev)
  
  return (
    <div>
        {showing ? <Hello/> : null }
        <button onClick={onClick}>{showing?"Hide":"Show"}</button>
    </div>
  );
}

export default App;

 

업데이트 제어시 마운트시와 업데이시 콘솔 찍히는데

마운트시 제외 업데이시만 콘솔 찍히게

useRef(참고 : https://bbbpp.tistory.com/187)

import { useState, useEffect, useRef } from "react";

function App() {
  const [counter, setValue] = useState(0)
  const onClick = () =>setValue((prev) => prev+1);

  // useEffect(()=>{
  //   console.log("counter 변경될때마다 실행"); //마운트시 업데이트시 발생
  // }, [counter]);

  const ref = useRef(false);
  useEffect(() => {
    if (!ref.current) {
      ref.current = true;
      return;
    } else {
      console.log("counter 변경될때마다 실행"); //업데이트시만 발생
    }
  }); 

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;