[React] 06. LifeCycle, State, Hooks

LifeCycle

• React 컴포넌트의 생명 주기!
  
  • 생성 - 업데이트 - 삭제
  • 생성 (Mounting): 컴포넌트가 처음 렌더링 되어 DOM에 삽입 됨.
  • 업데이트 (Updating): 컴포넌트의 state 또는 props가 변경되어 재렌더링 되는 과정.
  • 삭제 (Unmounting): 컴포넌트가 더 이상 필요하지 않아 DOM에서 삭제되는 과정.
• Strict Mode
  • Strict Mode를 설정할 경우 주로 생성 및 업데이트 단계의 메서드가 두 번 호출됩니다. 이는 개발자가 실수로 발생할 수 있는 문제를 미리 발견하도록 돕기 위한 것

---

State

• 컴포넌트 내부 상태값
  • 즉, React 컴포넌트의 변경 가능한 데이터
• 렌더링, 데이터 흐름에 사용되는 값만 state화
  • 왜? : State가 변경되면 재렌더링 되니까 성능 최적화를 위하여
• 직접 변경 불가능 (불변성 유지를 위해)
  • setState 함수로 변경
• 클래스형에서는 this.state로 상태관리

---

Hooks🪝

• 함수형 컴포넌트의 State, 라이프사이클을 관리
  • 함수형 컴포넌트에서 상태와 라이프사이클을 관리하기 위한 메커니즘.
  • use로 시작하는 여러 훅을 사용하여 다양한 기능을 구현.
  • 반복문, 조건문 내에서 호출하지 않도록 주의.
• 클래스형 컴포넌트를 사용하는 이유
  • -함수형 컴포넌트의 코드가 더 간결하고 가독성이 좋다.
  • 인스턴스를 생성하지 않기 때문에 메모리 자원을 효율적으로 사용한다.

useState

• state를 관리하는 훅, 다양한 데이터 타입을 상태로 관리 가능.

• useState

  • const [변수명, set함수명] = useState(초기값);

  import React, { useState } from 'react';
  
  const Counter = () => {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  
  export default Counter;

useEffect

• 라이프사이클을 관리하는 훅, 컴포넌트의 렌더링이 끝난 후 실행되어야 하는 기능에 사용

• useEffect(이펙트 함수, 의존성 배열);

  • 의존성 배열 [] => mount시 단 한 번만

  import React, { useState, useEffect } from 'react';
  
  const ExampleA = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      console.log('Effect ran');
    });
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  
  export default ExampleA;

  • 의존성 배열 X => mount, 컴포넌트 업데이트 될 때마다

  import React, { useState, useEffect } from 'react';
  
  const ExampleA = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      console.log('Effect ran');
  });
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
    );
  };
  
  export default ExampleA;

  • 의존성 배열 O => 마운트, 업데이트시

  import React, { useState, useEffect } from 'react';
  
  const MyComponent = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      const subscription = someService.subscribe();
  
      console.log('Effect ran');
  
      // Returning a cleanup function
      return () => {
        someService.unsubscribe(subscription);
        console.log('Cleanup function executed');
      };
    }, [count]); 
  
    return (
      <div>
        <button onClick={() => setCount(count + 1)}>
          Increase Count
        </button>
      </div>
    );
  };

  • Cleanup 함수
    • 마운트가 해제 되거나 의존성 배열값이 변경될 때 useEffect의 return으로 실행되는 함수