함수형 컴포넌트 생명주기

+

마운트는 컴포넌트가 처음으로 DOM에 삽입되는 시점을 의미합니다. 이 단계에서 컴포넌트의 초기 설정이 완료되고, 초기 데이터 페칭, 이벤트 리스너 등록 등의 작업을 수행할 수 있습니다.

// 1. 컴포넌트가 최초 렌더링 되는 경우에 실행되는 useEffect 함수를 구현. (마운트)
useEffect(() => {
    console.log('컴포넌트가 마운트됨!');
  }, []);

빈 배열 []로 인해, 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다.

리렌더링은 컴포넌트의 상태가 변경되거나 부모 컴포넌트로부터 새로운 props를 받을 때 발생합니다. 이 과정에서 컴포넌트는 새로운 상태를 반영하여 다시 그려집니다.

// 2. 컴포넌트가 리렌더링 되는 경우에 실행되는 useEffect 함수. (업데이트)
  useEffect(() => {
    console.log('리렌더링됨!');
  });

React에서 특정 상태값의 변화를 감지하고 싶을 때 useEffect의 의존성 배열을 활용합니다. 의존성 배열에 특정 상태값을 지정하면, 그 값이 변경될 때마다 해당 useEffect가 실행됩니다.

// 3. 특정값이 변경되는 경우에 실행되는 useEffect 함수. (특정 값 업데이트)
  useEffect(() => {
    console.log('특정변수명의 값이 변경됨');
  }, [특정값의 변수명);

언마운트는 컴포넌트가 DOM에서 제거되는 시점입니다. 이 시점에 이벤트 리스너를 제거하거나 타이머를 클리어하는 등 정리 작업을 수행해야 메모리 누수를 방지할 수 있습니다.

// 4. 클린업 함수. (언마운트)
  useEffect(() => {
    return () => {
      console.log('언마운트 되었습니다.');
    };
  }, []);

의존성 배열은 useEffect 훅의 두 번째 인자로 전달되며, useEffect가 언제 실행될지를 제어합니다. 배열에 있는 값이 변경될 때만 useEffect가 실행되며, 이로 인해 성능 최적화와 불필요한 작업을 방지할 수 있습니다.

useEffect(() => {
  console.log('의존성 배열의 값이 변경되었을 때만 실행됩니다.');
}, [dependencyValue]); // dependencyValue가 변경될 때만 실행

특정 상태값 변화 감지: 특정 상태값이 변경될 때만 useEffect를 실행하는 방식입니다. useEffect가 특정 상태값에만 반응하도록 설계된 경우를 설명할 때 사용됩니다.
의존성 배열: useEffect가 언제 실행될지를 결정하는 역할을 하며, useEffect의 실행 조건을 제어하는 기본 메커니즘입니다. 빈 배열로 전달되면 마운트 시 한 번만, 배열 내 값이 있으면 해당 값이 변경될 때만 실행됩니다.

결론적으로, 특정 상태값 변화 감지 은 특정 상태값의 변화를 감지하고 대응하기 위한 useEffect의 활용 예시를 설명하는 것이고, 의존성 배열은 useEffect의 실행 시점을 제어하는 도구인 의존성 배열의 역할과 사용법을 설명하는 것입니다.