React의 라이프 사이클에 대해 설명해 주세요.

면접용

리액트의 라이프사이클은 각 컴포넌트에 존재하는 마운트, 업데이트, 언마운트로 이루어진 주기를 뜻합니다. 라이프사이클은 다양한 메서드들로 관리할 수 있습니다.

클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 사용하여 상태 관리 및 리소스를 정리할 수 있습니다.

함수형 컴포넌트에서는 16.8 버전부터 추가된 hook을 이용하여 같은 기능을 사용할 수 있습니다. useState와 useEffect 훅을 사용해 마운트, 업데이트, 언마운트에 해당하는 작업을 처리할 수 있습니다.

개념설명

리액트의 주요 특징 중 하나는 컴포넌트 기반 아키텍쳐라는 점입니다. 각 컴포넌트는 자체적인 라이프사이클을 다음처럼 가지고 있습니다.

  1. 컴포넌트 마운트(생성)

  2. 컴포넌트 업데이트

  3. 컴포넌트 언마운트(제거)

라이프사이클을 통해 컴포넌트가 언제 어떻게 동작하는지 예측할 수 있으며, 라이프사이클 API를 활용해 컴포넌트의 상태와 동작을 제어할 수 있습니다.

라이프사이클 메서드는 클래스형과 함수형 컴포넌트에서 다소 차이가 있습니다. React 16.8 버전 이후부터 Hooks 업데이트가 추가되면서 함수형 방식에서도 라이프사이클을 다룰 수 있게 되었습니다.

클래스형 컴포넌트에서의 라이프사이클 메서드

image

리액트 컴포넌트가 생겨나는 Mount 단계에서는 다음과 같은 라이프사이클 메서드가 생성되고, 실행됩니다.

  • constructor(): 생성자 메서드

  • static getDerivedStateFromProps(): 부모 컴포넌트에서 전달되는 props가 변경될 때마다 state를 업데이트해주는 메서드

    • 함수형 컴포넌트에서 useState의 set함수를 렌더링 과정 중에 사용하는 것

    /** 자식 컴포넌트 */
class Counter extends Component {
  constructor(props) {
    super(props);
    // 초기 state 설정
    this.state = {
      count: 0
    };
  }

  // static getDerivedStateFromProps 메서드
  static getDerivedStateFromProps(nextProps, prevState) {
    // 부모에서 전달되는 count 값이 변경될 때마다 상태 업데이트
    if (nextProps.count !== prevState.count) {
      return {
        count: nextProps.count
      };
    }
    // 변경 사항이 없으면 null을 반환하여 상태를 변경하지 않음
    return null;
  }

  render() {
    return (
      <div>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
}

/** 부모 컴포넌트 */
class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.increment}>Increment</button>
        <Counter count={this.state.count} />
      </div>
    );
  }
}

  • render(): JSX를 리턴하면 HTML로 컴파일되어 보여지게 되는 라이플 사이클 메서드입니다.

    • state, props가 변화되었을 때 재렌더링됩니다.

  • componentDidMount(): 컴포넌트가 생성되면 트리거되는 메서드입니다.

    • 컴포넌트가 생겼을 때 한번만 실행되며, 변화가 일어나도 재실행되지 않습니다.

다음으로, 컴포넌트 Update 단계에서 실행되는 메서드는 다음과 같습니다.

  • static getDerivedStateFromProps()

  • shouldComponentUpdate(): return 하는 값(boolean)에 따라 컴포넌트의 렌더링 여부가 결정됩니다.

    shouldComponentUpdate(nextProps, nextState){
	if (this.state !== nextState) {
		return true;
	}
	return false;
}

  • render()

  • getSnapshotBeforeUpdate(): render 메서드가 호출된 후에, 컴포넌트가 업데이트되기 직전 실행됩니다.

    • 업데이트 전 DOM의 상태를 스냅샷으로 캡처할 수 있습니다.

    • return값은 componentDidUpdate()의 인자가 됩니다.

    • ex) 스크롤 위치 추적

    • 함수형 컴포넌트에서 사용할 수 없습니다.

  • componentDidUpdate(): 재랜더링시 실행되는 메서드입니다.

    • 컴포넌트가 업데이트된 후 마지막으로 실행됩니다.

    • props, state가 변경되어 → 컴포넌트 렌더링이 끝나고 → DOM이 업데이트된 뒤에 → 실행됩니다.

    • DOM 업데이트 후에 추가적인 작업을 할 때 유용합니다.

    class ScrollTracker extends Component {
  state = { scrollY: 0 };

  // getSnapshotBeforeUpdate: 업데이트 직전에 호출되어 스크롤 위치 캡처
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return window.scrollY; // 현재 스크롤 위치 반환
  }

  // componentDidUpdate: getSnapshotBeforeUpdate에서 반환된 값(snapshot) 사용
  componentDidUpdate(prevProps, prevState, snapshot) {
    window.scrollTo(0, snapshot); // 이전 스크롤 위치로 복원
  }

  render() {
    return (
      <div>
        <h1>Scroll Tracker</h1>
        <div style={{ height: '1500px' }}>
          <p>Scroll down to track your scroll position.</p>
        </div>
      </div>
    );
  }
}

마지막으로 컴포넌트 Unmount 단계에서 생성되고, 실행되는 메서드는 다음과 같습니다.

  • componentWillUnmount(): 컴포넌트가 사라질 때 실행되는 메서드입니다.

    • 기존 컴포넌트에 할당해둔 것을 해제할 때 사용합니다.

    • Chart.js와 같은 외부 라이브러리를 사용할 때, 컴포넌트가 제거되기 전에 인스턴스를 해제하여 메모리 누수를 막을 수 있습니다.

    componentWillUnmount() {
  // 차트 인스턴스를 파괴하여 메모리 해제
  if (this.chart) {
    this.chart.destroy();
  }
}

함수형 컴포넌트에서의 라이프사이클 메서드

image 1

함수형 컴포넌트에서는 클래스형보다 적은 개수의 메서드를 사용합니다. 또한 기존에 사용되는 메서드들을 hook을 통해 구현할 수 있습니다.

컴포넌트 마운트 시 실행되는 함수들을 hook으로 어떻게 대체할 수 있는지 살펴보겠습니다.

  • constructor

    • constructor() 메서드를 사용하는 클래스형과 달리 useState hook을 사용합니다.

    //class
class Example extends React.Component {
	constructor(props) {
      	super(props);
      	this.state = { count: 0 } ;
    }
}

// function => Hooks
const Example = () => {
  const [count,setCount] = useState(0);
}

  • render()

    • render 메서드를 명시적으로 쓰지 않고도 렌더링할 수 있습니다.

  • componentDidMount()

    • useEffect hook을 사용하여 해당 메서드를 구현합니다.

    • 빈 의존성 배열을 사용해야 같은 기능을 구현할 수 있습니다.

    // Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

++ static getDerivedStateFromProps()

  • useState의 set 함수가 렌더링 중에 호출될 때와 같은 방식으로 동작합니다.

const [count, setCount] = useState(0);
const [isClicked, setIsClicked] = useState(false);

// 렌더링 중 상태를 업데이트
useEffect(() => {
  if (!isClicked) {
    setIsClicked(true); // 상태 업데이트로 컴포넌트가 리렌더링 될 것
    setCount(10); // 상태 업데이트로 count도 변경
  }
}, []); // 마운트 시에만 실행되도록 빈 배열

다음으로 컴포넌트 업데이트 시 실행되는 함수들을 hook으로 대체한 모습입니다.

  • render()

  • componentDidUpdate()

    • useEffect를 사용하여 동일하게 동작할 수 있습니다.

    // class
constructor(props) {
  super(props);
  this.state = { count: 0 };
}

// componentDidUpdate는 props나 state가 변경된 후에 호출됩니다.
componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    console.log('Count has updated to: ', this.state.count);
  }
}

// function
const [count, setCount] = useState(0);

// useEffect는 컴포넌트가 렌더링된 후에 실행됩니다.
useEffect(() => {
  console.log('Count has updated to: ', count);
}, [count]); // count가 변경될 때마다 실행됩니다.

마지막으로 컴포넌트 언마운트 단계에서 실행되는 함수들을 hook으로 대체한 모습입니다.

  • componentWillUnmount

    • useEffect, CleanUp 함수를 통해 구현할 수 있습니다.

    const chartRef = useRef(null); // Chart.js 차트를 그릴 canvas 요소를 참조

useEffect(() => {
  // 차트 생성
  const chart = new Chart(chartRef.current, {
		...
  });

  // 컴포넌트가 언마운트될 때 차트 인스턴스를 파괴하는 클린업 함수
  return () => {
    if (chart) {
      chart.destroy(); // 차트 인스턴스 정리
    }
  };
}, []); // 빈 배열로 설정하면 컴포넌트 마운트 시 한 번만 실행되고 언마운트 시 클린업 함수 실행
PreviousReactNextuseMemo, useCallback의 차이점에 대해 설명해 주세요.

Last updated