React Hooks에서 useState와 useEffect의 차이점 이해하기

useState와 useEffect의 차이점은 무엇인가요?

리액트 훅스는 16.8버전에서 도입된 것으로, 클래스 컴포넌트의 대안으로서 함수형 컴포넌트 작성 방식을 혁신적으로 바꿔놓았습니다. 훅스 API에서 두 가지 중요한 훅스는 useState와 useEffect입니다. 이 두 가지 훅스의 차이를 알아봅시다.

useState 이해하기

useState 훅스를 사용하면 함수형 컴포넌트에서 이전에 클래스 컴포넌트에서만 가능했던 상태(state)를 가질 수 있는 기능을 제공합니다. 함수형 컴포넌트 내에서 상태 변수를 정의하고 업데이트하는 방법을 제공합니다. 클래스 컴포넌트와 함수형 컴포넌트 간에 이를 어떻게 달성할 수 있는지 비교해봅시다.

class CounterClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ 
          count: this.state.count + 1
        })}>Increase</button>
      </div>
    );
  }
}

function CounterFunction() {
  const [count, setCount] = React.useState(1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => 
        setCount(count + 1)}
      >Increase</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <CounterClass />
    <CounterFunction />
  </div>
, document.querySelector('#app'));

보시다시피 useState 훅스를 사용하면 함수형 컴포넌트에서 상태(여기서는 count 변수)를 가지고 그것을 setCount 함수를 사용하여 업데이트할 수 있습니다. 이를 통해 우리는 클래스를 사용하지 않고도 상태가 있는 함수형 컴포넌트를 만들 수 있습니다.

useEffect 이해하기

useEffect 훅스는 함수형 컴포넌트 내에서 사이드 이펙트(side effect)를 수행하기 위해 사용됩니다. 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메소드의 기능을 결합한 것입니다.

class LifecycleClass extends React.Component {
  componentDidMount() {
    console.log('Mounted');
  }

  componentWillUnmount() {
    console.log('Will unmount');
  }

  render() {
    return <div>Lifecycle Class</div>;
  }
}

function LifecycleFunction() {
  React.useEffect(() => {
    console.log('Mounted');
    return () => {
      console.log('Will unmount');
    };
  }, []); // 빈 배열은 마운트시에만 실행된다는 의미입니다.
  return (
    <div>Lifecycle Function</div>
  );
}

ReactDOM.render(
  <div>
    <LifecycleClass />
    <LifecycleFunction />
  </div>
, document.querySelector('#app'));

이 예제에서 useEffect 훅스는 componentDidMount와 componentWillUnmount 메소드를 모방합니다. 컴포넌트가 마운트되고 언마운트될 때 메시지를 기록합니다.

결론

useState와 useEffect 훅스는 리액트 라이브러리에 강력한 기능을 추가합니다. 함수형 컴포넌트에서 상태를 가지고 라이프사이클과 유사한 동작을 관리할 수 있도록 합니다. 이러한 기능을 위해 클래스 형태의 컴포넌트를 사용할 필요가 없어집니다.

useState 훅스를 사용하면 함수형 컴포넌트에서 상태 변수를 가질 수 있으며 쉽게 업데이트할 수 있습니다. useEffect 훅스를 사용하면 함수형 컴포넌트에서 사이드 이펙트를 수행하고 컴포넌트 라이프사이클 동작을 관리할 수 있습니다.

하지만 이러한 훅스들은 함수형 컴포넌트 작동 방식과 그 안에서 상태와 사이드 이펙트를 어떻게 관리하는지에 대한 좋은 이해가 필요합니다.

더 자세한 내용을 알고 싶다면, 공식 리액트 문서를 참고하는 것을 추천합니다. 해당 문서에서는 useState와 useEffect를 다양한 시나리오에서 사용하는 방법에 대해 상세한 설명과 예제를 제공합니다.

참고 자료 : 

reactjs