[javascript] 리액트 프레임워크에서 상태 변경을 감지하는 방법은 무엇인가요?

05 Dec 2023

javascript

setState() 메서드를 사용하여 상태 변경을 알림: 리액트 컴포넌트 내에서 상태를 관리할 때, setState() 메서드를 사용하여 상태를 변경하고, 리액트에게 상태 변경을 알립니다.

예시:
```
state = {
  count: 0
};

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

render() {
  return (
    <div>
      <p>Count: {this.state.count}</p>
      <button onClick={this.incrementCount}>Increment</button>
    </div>
  );
}
```
위의 예시에서는 버튼을 클릭할 때마다 count 상태가 1씩 증가합니다. setState() 메서드를 호출하여 count 상태를 업데이트하고, 리액트가 변경된 상태를 감지하여 화면을 다시 렌더링합니다.

useEffect() 훅을 사용하여 상태 변경을 감지: 리액트 16.8 버전 이후부터는 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. useEffect() 훅을 사용하여 상태 변경을 감지하고, 이에 따른 작업을 수행할 수 있습니다.

예시:

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

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

  useEffect(() => {
    // count 상태가 변경될 때마다 실행되는 작업
    console.log("Count changed");
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

위의 예시에서는 count 상태가 변경될 때마다 useEffect() 훅 내의 작업이 실행됩니다. 이를 통해 리액트는 상태 변경을 감지하고 화면을 적절하게 업데이트합니다.

이외에도 리액트에는 다양한 방법으로 상태 변경을 감지하고 화면을 업데이트하는 기능이 있습니다. 이를 통해 리액트는 효율적이고 원활한 상태 관리를 할 수 있습니다.

참고자료: