React의 상태(state)와 생명주기(life cycle)

상태 (State)

• 정의: 상태는 컴포넌트의 데이터나 UI를 결정하는 객체입니다. 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
• 사용법: 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다. 클래스형 컴포넌트에서는 this.state와 this.setState()를 사용합니다.

예시 (함수형 컴포넌트):

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

생명주기 (Life Cycle)

생명주기는 컴포넌트의 생성, 업데이트, 제거 과정에서 발생하는 메서드들을 포함합니다. 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 useEffect 훅으로 구현할 수 있습니다.

클래스형 컴포넌트 생명주기 메서드

1. 마운트 (Mounting)
   • constructor: 컴포넌트가 생성될 때 호출.
   • componentDidMount: 컴포넌트가 마운트된 후 호출.
2. 업데이트 (Updating)
   • componentDidUpdate: 컴포넌트가 업데이트된 후 호출.
3. 언마운트 (Unmounting)
   • componentWillUnmount: 컴포넌트가 언마운트되기 전에 호출.

함수형 컴포넌트 생명주기

• useEffect: 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 실행할 코드를 정의합니다.

예시:

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');

    return () => {
      console.log('컴포넌트가 언마운트됩니다.');
    };
  }, []); // 빈 배열을 주면 마운트와 언마운트 시에만 실행

  return <div>안녕하세요!</div>;
}