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

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


1. **정의**: 상태는 컴포넌트의 데이터나 정보를 저장하는 객체입니다. 각 컴포넌트는 고유한 상태를 가질 수 있으며, 상태가 변경될 때마다 컴포넌트가 다시 렌더링됩니다.

2. **상태 관리**:
   - **useState Hook**: 함수형 컴포넌트에서 상태를 관리하기 위해 사용합니다.
     ```jsx
     import React, { useState } from 'react';

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

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

3. **상태의 불변성**: 상태는 직접 수정하지 않고, 항상 새로운 상태 객체를 생성하여 업데이트해야 합니다. 이는 React가 상태 변경을 감지하고 효율적으로 렌더링할 수 있도록 돕습니다.

### 생명주기 (Life Cycle)

1. **정의**: 생명주기는 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정을 말합니다. React 컴포넌트는 여러 단계의 생명주기를 거칩니다.

2. **생명주기 메서드** (클래스형 컴포넌트):
   - **componentDidMount**: 컴포넌트가 처음 렌더링된 후 호출됩니다. API 호출이나 초기 설정에 주로 사용됩니다.
   - **componentDidUpdate**: 상태나 프롭이 변경된 후 호출됩니다. 이전 상태와 비교하여 특정 작업을 수행할 수 있습니다.
   - **componentWillUnmount**: 컴포넌트가 제거되기 전에 호출됩니다. 리소스 해제나 구독 취소 등에 사용됩니다.

3. **Hook을 통한 생명주기 관리** (함수형 컴포넌트):
   - **useEffect Hook**: 생명주기 메서드의 역할을 수행합니다. 의존성 배열을 통해 특정 조건에서만 실행되도록 설정할 수 있습니다.
     ```jsx
     import React, { useEffect } from 'react';

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

         return () => {
           // 컴포넌트가 언마운트될 때 실행
           console.log('컴포넌트가 언마운트되었습니다.');
         };
       }, []); // 빈 배열은 마운트와 언마운트 시점에만 실행됨을 의미

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

### 요약

- **상태**는 컴포넌트의 데이터로, `useState`를 통해 관리하며, 직접 수정하지 않고 불변성을 유지해야 합니다.
- **생명주기**는 컴포넌트의 생성, 업데이트, 제거 과정을 설명하며, 클래스형 컴포넌트의 생명주기 메서드와 함수형 컴포넌트의 `useEffect`로 관리할 수 있습니다.

이 두 가지 개념은 React에서 컴포넌트를 효과적으로 관리하는 데 매우 중요한 역할을 합니다.