[typescript] JSX에서 컴포넌트의 프롭스와 스테이트 변경 감지하는 방법

18 Dec 2023

typescript

React 애플리케이션을 개발하다 보면, 컴포넌트의 상태(state)나 속성(props)이 변경될 때 해당 변경을 감지하고 이에 대응하는 작업을 수행해야 하는 경우가 많습니다. JSX에서는 이러한 변경을 감지하여 처리하는 방법에 대해 알아보겠습니다.

프롭스 변경 감지

컴포넌트에 새로운 프롭스가 전달될 때마다 변경을 감지하여 렌더링하고 싶은 경우, componentDidUpdate 생명주기 메소드를 사용할 수 있습니다. 다음은 TypeScript를 사용한 예시 코드입니다.

import React, { Component } from 'react';

type Props = {
  name: string;
};

type State = {
  previousName: string | null;
};

class MyComponent extends Component<Props, State> {
  state = {
    previousName: null
  };

  componentDidUpdate(prevProps: Props) {
    if (prevProps.name !== this.props.name) {
      this.setState({ previousName: prevProps.name });
      // 프롭스가 변경되었을 때 수행할 작업
    }
  }

  render() {
    return <div>{this.props.name}</div>;
  }
}

위 코드에서 componentDidUpdate 메소드는 이전 프롭스(prevProps)와 현재 프롭스(this.props)를 비교하여 변경이 있는지 확인합니다.

스테이트 변경 감지

컴포넌트의 상태가 변경될 때마다 해당 변경을 감지하여 처리하고 싶을 때는 componentDidUpdate나 useState 훅의 의존성 배열(deps)을 사용할 수 있습니다.

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const previousCount = usePrevious(count);

  useEffect(() => {
    // 이전 count와 현재 count 비교
    if (previousCount !== count) {
      // count가 변경되었을 때 수행할 작업
    }
  }, [count]);

  return <div>{count}</div>;
};

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

위 코드에서 useEffect 훅은 의존성 배열을 이용하여 count의 변경을 감지하고, usePrevious는 직전 값이 담긴 ref를 반환하여 비교할 수 있도록 합니다.

이렇게 JSX에서 프롭스와 스테이트 변경을 감지하여 처리하는 방법을 사용함으로써 React 애플리케이션을 보다 효율적으로 구현할 수 있습니다.

참고 문헌:

React 공식 문서: https://reactjs.org/docs/state-and-lifecycle.html
TypeScript 공식 문서: https://www.typescriptlang.org/docs/