[React] useState와 생명주기

React의 useState와 생명주기

React는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나입니다. React의 핵심 개념 중 하나는 상태(state)의 관리입니다. useState 훅을 사용하면 컴포넌트의 상태를 관리할 수 있습니다. 또한 React의 생명주기 메서드를 사용하여 컴포넌트의 렌더링을 제어할 수 있습니다. 이번 글에서는 useState와 생명주기 메서드에 대해 자세히 알아보겠습니다.

useState

useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React의 훅 중 하나입니다. 훅(hook)은 함수형 컴포넌트에서 상태 관리, 라이프사이클 등 클래스 컴포넌트에서만 가능했던 기능들을 사용할 수 있게 해주는 함수입니다. useState를 사용하면 컴포넌트의 상태를 변경하고, 변경된 상태에 따라 컴포넌트가 다시 렌더링됩니다. useState 훅은 상태 변수와 상태를 변경하는 함수를 반환합니다. 상태 변수는 컴포넌트가 다시 렌더링될 때마다 초기화됩니다. 예를 들어, 아래 코드는 useState를 사용하여 버튼 클릭 수를 저장하고 표시합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있으며, 클래스 컴포넌트에서 사용하는 this.state와 setState와 같은 기능을 수행할 수 있습니다. 이를 통해 함수형 컴포넌트가 가지는 장점인 코드 간결성과 유지보수성을 유지하면서도 상태 관리 기능을 사용할 수 있게 되었습니다.

생명주기 메서드

React 컴포넌트는 다양한 생명주기 메서드를 가지고 있습니다. 이러한 메서드를 사용하면 컴포넌트의 렌더링을 제어할 수 있습니다. 생명주기 메서드는 컴포넌트가 마운트, 업데이트, 언마운트될 때 호출됩니다. 예를 들어, componentDidMount 메서드는 컴포넌트가 마운트될 때 호출되며, componentDidUpdate 메서드는 컴포넌트가 업데이트될 때 호출됩니다. 이러한 생명주기 메서드를 사용하여 컴포넌트가 렌더링될 때 특정 작업을 수행할 수 있습니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 컴포넌트가 마운트되었을 때 실행되는 코드
  }

  componentDidUpdate(prevProps, prevState) {
    // 컴포넌트가 업데이트될 때 실행되는 코드
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트될 때 실행되는 코드
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

생명주기 메서드를 사용하면 컴포넌트가 마운트, 업데이트, 언마운트될 때 원하는 작업을 수행할 수 있습니다. componentDidMount 메서드를 사용하면 컴포넌트가 마운트될 때 초기화 작업을 수행할 수 있고, componentDidUpdate 메서드를 사용하면 컴포넌트가 업데이트될 때 변경된 내용에 따라 다른 작업을 수행할 수 있습니다. componentWillUnmount 메서드를 사용하면 컴포넌트가 언마운트될 때 리소스를 해제하는 작업을 수행할 수 있습니다.

결론

useState와 생명주기 메서드는 React 컴포넌트를 다룰 때 중요한 개념입니다. useState를 사용하면 컴포넌트의 상태를 관리하고, 생명주기 메서드를 사용하면 컴포넌트의 렌더링을 제어할 수 있습니다. 이번 글을 통해 useState와 생명주기 메서드에 대해 자세히 알아보았습니다. React를 사용할 때 이러한 개념을 잘 이해하고 활용하면 좀 더 효율적이고 유지보수성 높은 코드를 작성할 수 있습니다.