React의 lifecycle(생명 주기)

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

• 라이프사이클은 컴포넌트의 수명 주기를 의미하며, React 컴포넌트가 생성되고, 업데이트되며, 제거될 때까지의 과정이다.
• 모든 React 컴포넌트는 라이프사이클을 가진다.

---

2. 라이프사이클의 3단계

1. Mount (마운트)
   • 컴포넌트가 DOM에 삽입되어 화면에 나타나는 단계이다.
   • 이 단계에서 필요한 초기화 작업(데이터 가져오기, 이벤트 리스너 추가 등)을 수행한다.
2. Update (업데이트)
   • props나 state의 값이 변경 또는 부모 컴포넌트가 리렌더링되는 단계이다.
   • 이 단계에서 변경된 데이터를 기반으로 화면을 다시 렌더링하거나 추가 작업을 수행한다.
3. Unmount (언마운트)
   • 컴포넌트가 DOM에서 제거되는 단계이다.
   • 이벤트 리스너 제거, 메모리 누수 방지 등 뒷정리 작업을 수행한다.

---

3. 클래스형 컴포넌트에서의 라이프사이클

1) 주요 메서드

• Mount (마운트)
  1. constructor
     • 컴포넌트 초기화 작업 수행 (state 설정, 메서드 바인딩 등).
  2. render
     • UI를 생성하고 DOM에 삽입.
     • render 메서드의 특징
       • Lifecycle Method 중 무조건 구현해야 하는 유일한 메서드이다.
       • Mount 시에도 실행되고, Update 시에도 실행되는 메서드이다.
  3. componentDidMount
     • 컴포넌트가 화면에 완전히 렌더링된 후 실행되며, 데이터 가져오기 등의 작업에 사용.
• Update (업데이트)
  1. getDerivedStateFromProps
     • props 변경에 따라 state를 동기화하는 메서드 (사용 빈도 낮음).
  2. shouldComponentUpdate
     • 컴포넌트가 리렌더링될지 결정하는 메서드.
     • 불필요한 렌더링을 방지하여 성능을 최적화할 때 사용.
  3. componentDidUpdate
     • 업데이트 후 추가 작업이 필요할 때 사용 (예: DOM 조작).
     • 리렌더링 후, 어떤 변화가 모두 반영된 뒤 호출된다.
• Unmount (언마운트)
  1. componentWillUnmount
     • 컴포넌트가 DOM에서 제거되기 직전에 실행되며, 리소스를 정리하는 데 사용. ( DOM에 직접 등록했던 이벤트를 제거하거나 사용한 외부 라이브러리의 사용을 중단할 필요가 있을 때, 이 메서드를 호출해 정리한다.)

---

2) 클래스형 컴포넌트 사용 주의

• 공식 문서에서도 클래스형 컴포넌트는 이제 잘 사용하지 않으며, 함수형 컴포넌트와 훅(Hooks)을 권장하고 있다.
• 주요 참고 링크: React 문서

---

4. 함수형 컴포넌트와 useEffect

1) useEffect란?

• React의 함수형 컴포넌트에서 라이프사이클을 관리하기 위해 사용하는 Hook이다.
• 컴포넌트가 렌더링될 때 또는 특정 값이 변경될 때 실행할 작업을 정의한다. ( 컴포넌트가 화면에 렌더링이 완료된 후에 실행된다는 뜻) ( componentDidMount + componentDidUpdate + componentWillUnmount가 합쳐진것 ) 어떻게 작성해야 각 메서드의 기능을 할까? 의존성 배열을 작성하는 방법에 따라 호출되는 순간을 정할 수 있다.

  // 의존성 배열을 작성하지 않은 경우
  useEffect(() => {
    컴포넌트가 Mount되거나 Update될 때마다 실행
  }); 
  
  // 의존성 배열에 빈 배열을 넘긴 경우
  useEffect(() => {
    컴포넌트가 처음 Mount 될 때만 실행
  }, []); 
  
  // 의존성 배열에 요소를 넘기는 경우
  useEffect(() => {
    의존성 배열의 요소 중 하나라도 값에 변경이 있으면 실행
  }, [의존성1, 의존성2, ..]); 
  
  // callback 함수 안에 return으로 다른 callback 함수를 반환할 때
  useEffect(() => {
    컴포넌트가 처음 Mount 될 때만 실행
  
    return () => {
      // 컴포넌트가 Unmount될 때 실행될 클린업 함수
    };
  }, []); 

---

2) useEffect의 주요 동작

1. Mount (최초 렌더링 시)

   • 컴포넌트가 처음 화면에 렌더링될 때 실행된다.

   useEffect(() => {
     console.log("컴포넌트가 마운트되었습니다.");
   }, []); // 의존성 배열이 비어 있으면 Mount 시 실행

2. Update (특정 값 변경 시)

   • 특정 값이 변경될 때만 실행되도록 설정할 수 있다.

   useEffect(() => {
     console.log("number 값이 변경되었습니다.");
   }, [number]); // number 값이 변경될 때만 실행

3. Unmount (제거 직전 뒷정리 작업)

   • 컴포넌트가 화면에서 제거되기 직전에 실행된다. (return으로 반환하면 됨)
   • cleanup 함수를 사용하여 리소스를 정리한다.

   useEffect(() => {
     return () => {
       console.log("컴포넌트가 언마운트됩니다.");
     };
   }, []); // 의존성 배열이 비어 있어 Unmount 시 실행

---