[REACT] 라이프사이클

라이프 사이클

---

라이프사이클

1. 라이프 사이클(LifeCycle) 이란?

• 생애주기. 인간의 탄생부터 죽음까지의 타임라인을 단계로 나눈 것.

1. Mount
   • 컴포넌트가 탄생하는 순간.
   • 컴포넌트가 화면에 처음으로 렌더링되는 순간.
2. Update
   • 컴포넌트가 리렌더링 되는 순간.
3. UnMount
   • 컴포넌트가 렌더링되는 순간.

• 리액트 컴포넌트의 라이프사이클 예시
  • Mount(서버에서 데이터를 불러오는 작업) → Update(어떤 값이 변경되었는지 콘솔에 출력) → UnMount(컴포넌트가 사용하던 메모리 정리)

라이프사이클마다 컴포넌트가 다른 기능을 수행하게 하는 것을 라이프사이클 제어라고 한다.

2. useEffect

1. useEffect란?
   • 함수형 컴포넌트에서 사이트이펙트를 관리하기 위해 사용하는 훅.
   • 사이드 이펙트란, 컴포넌트의 주요 목적(렌더링 UI)외에 발생하는 부수적인 작업을 말한다.
   • 리액트의 주요 목적은 UI를 렌더링하는 것이지만, 실제 애플리케이션에서는 서버에서 데이터 가져오기(API 호출), DOM을 직접 조작하기, 로그를 기록하거나 상태를 저장하기, WebSoKet 연결 관리 등 외부에서 작업이 발생한다.
   • 이를 모두 사이드 이펙트라 한다
2. useEffect 기본 문법

useEffect(effectFunction, dependencyArray);

• effectFunction : 실행할 동작을 정의한 콜백 함수. 이 함수는 컴포넌트가 렌더링된 이후에 실행된다.
• dependencyArray : 의존성 배열로, 이 배열에 포함된 값이 변경될 때만 effectFunction이 실행된다(deps라고도 불림)
  • 빈 배열 [] : 마운트 시 한 번만 실행
  • 값이 있는 배열 [state, props] : 배열의 값이 변경될 때 실행
  • 생략 : 렌더링될 때마다 실행

1. useEffect 예시

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

function App() {
  const [count, setCount] = useState(0);
  const handleSetCount = (value) => {
    setCount(count + value);
  };

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

  // 컴포넌트마다 백그라운드 및 여백 설정 위해 section으로 묶어줌
  return (
      <div className="App">
        <h1>Simple Counter</h1>
        <section>
          <Viewer count={count} />
        </section>
        <section>
          <Controller handleSetCount={handleSetCount} />
        </section>
      </div>
  );
}

export default App;

• 위 코드는 count가 변화할때마다 console.log가 찍히게된다.

Click 이벤트에 넣는다면?

useEffect가 꼭 필요할까? onClickButton 이벤트 안에 setCount로 값을 바꾼 후 그 값을 console에 출력한다면?
=> setState가 비동기로 동작하기 때문에 상태가 즉시 변경되는 것이 아닌 렌더링 작업이 끝난 후 업데이트가 되기 때문에 안된다.

• 리액트는 렌더링 성늘을 최적화하기 위해 여러 상태 변경 요청(setState)를 모아 한꺼번에 처리 한다. 이를 통해 재렌더링을 방지하고 효율적으로 화면을 업데이트한다.
  
• 클릭 이벤트 발생 시 실행 흐름
  
  • handleSetCount(value) 실행
    
  • setCount(count + value) 호출하여 상태 변경 요청
    
  • console.log(count : ${count}) 실행. 아직 상태값이 변경되지 않았으므로 이전 값이 출력된다.
    
  • 리액트 상태 변경작업(비동기)
    
  • 새로운 상태값으로 컴포넌트 리렌더링
    
  • count가 변경되었기 때문에 useEffect 실행.

3. useEffect로 라이프사이클 제어

1. Mount

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

   • useEffect의 deps가 빈 배열인 경우 컴포넌트가 처음 마운트될 때 한 번만 실행된다. 이 패턴은 초기화 작업에 주로 사용된다(데이터 로드, 이벤트 리스너 등록 등에 사용)
2. Update

   useEffect(() => {
   console.log("update!");
   });
   

   • seEffect에 deps가 없는 경우 모든 리렌더링 시 실행된다(상태 변경 로그 출력, DOM 상태 변경 감지 등에 사용된다)
3. UnMount

   useEffect(() => {
    // 클린업, 정리함수
    return () => {
        console.log("unmout");
    }
   }, []);
   

   • useEffect안에서 return으로 반환된 함수는 정리(clean-up)함수로 동작한다. 정리함수는 컴포넌트가 언마운트될 때, 의존성 배열이 변경되어 useEffect가 다시 실행되기 직전에 자동으로 호출된다.

4. 리액트 개발자 도구 React Developer Tools

1. 컴포넌트 계층 구조 표시
   • 컴포넌트 계층 구조를 시각적으로 볼 수 있다.
   • 컴포넌트의 부모자식 관계 등을 파악할 수 있다.
2. 상태/속성 시각화
   • 개발중인 컴포넌트의 상태, 속성정보 실시간 확인
   • 이를 통해 컴포넌트가 어떤 데이터를 받고 어떤 상태를 갖는지 파악 가능
3. 상태변화 추적
   • 컴포넌트의 상태변화 추적 및 디버깅 가능
4. Virtual DOM 시각화