[React] React에서 Lifecycle

함수형 컴포넌트

함수형 컴포넌트는 React에서 사용되는 컴포넌트 유형 중 하나로, 클래스형 컴포넌트 대신 함수를 사용하여 UI를 정의하는 방식이다.

함수형 컴포넌트는 React 16.8 버전부터 Hooks API를 도입함으로써 생명주기 관리와 관련된 기능을 사용할 수 있게 되었다.

함수형 컴포넌트에서도 생명주기와 관련된 작업을 수행할 수 있다.

주요 개념

useState

useState Hook은 상태(state)를 관리하는 데 사용된다. 상태는 컴포넌트의 데이터를 저장하고 변경할 때 사용되며, 컴포넌트가 렌더링될 때마다 상태를 업데이트할 수 있다.

useEffect
useEffect Hook은 컴포넌트의 생명주기와 관련된 작업을 수행할 때 사용된다. 예를 들어, 컴포넌트가 마운트되거나 업데이트될 때 특정 작업을 실행하거나, 컴포넌트가 언마운트될 때 정리 작업을 수행할 수 있다.

useLayoutEffect
useLayoutEffect Hook은 useEffect와 유사하게 생명주기 작업을 수행하지만, 렌더링 직후에 동기적으로 실행됩니다. 일반적으로 렌더링 전에 브라우저 레이아웃에 영향을 미치는 작업을 수행해야 할 때 사용됩니다.

useRef
useRef Hook은 DOM 요소에 접근하거나 컴포넌트의 값들을 변경하지 않고도 영속적으로 값을 저장할 때 사용된다. 생명주기와 관련된 작업 중에 참조 변수를 사용하여 이전 상태를 추적할 때 유용하다.

useMemo 및 useCallback
이 두 Hook은 렌더링 성능을 최적화하는 데 도움을 준다. useMemo는 계산 비용이 높은 값을 캐싱하고, useCallback은 함수를 캐싱하여 렌더링 시에 불필요한 함수 재생성을 방지한다.

React 함수형 컴포넌트와 라이프사이클 메서드

컴포넌트 마운트 (Mounting)

• useEffect Hook을 사용하여 컴포넌트가 마운트될 때 실행되는 작업을 수행

// 함수형 컴포넌트
function MyComponent() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행할 작업
  }, []);
}

컴포넌트 업데이트 (Updating)

• useEffect Hook을 사용하여 컴포넌트 업데이트 후 실행할 작업을 정의

// 함수형 컴포넌트
function MyComponent() {
  useEffect(() => {
    // 컴포넌트가 업데이트된 후에 실행할 작업
  });
}

컴포넌트 언마운트 (Unmounting)

• useEffect Hook을 사용하여 컴포넌트가 언마운트될 때 실행할 정리 작업을 정의

// 함수형 컴포넌트
function MyComponent() {
  useEffect(() => {
    return () => {
      // 컴포넌트가 언마운트될 때 실행할 정리 작업
    };
  }, []);
}