[React]state

React에서 State는 컴포넌트의 상태를 관리하는 중요한 기능입니다. State는 컴포넌트의 상태를 저장하는 객체입니다. 사용자의 액션, 네트워크 응답 등으로 인해 변경될 수 있는 데이터를 관리합니다. 
State는 컴포넌트의 내부 상태를 나타내며, 이 상태에 따라 컴포넌트의 렌더링 결과가 달라질 수 있습니다. State의 변경은 비동기적으로 일어날 수 있으며, React는 State의 변경을 감지하고 컴포넌트를 재렌더링합니다. 

State 관리 방법
useState Hook 사용: 가장 기본적인 State 관리 방법으로, 함수형 컴포넌트에서 State를 사용할 수 있게 해줍니다. 

import React, { useState } from 'react';

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

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

이 예제는 useState를 사용하여 count라는 상태를 관리하는 간단한 카운터 앱입니다. 버튼을 클릭하면 카운트가 증가하거나 감소합니다.

 

React 라이프 사이클 메서드
React 컴포넌트는 생성부터 소멸까지 여러 단계를 거치며, 이러한 단계에서 특정 작업을 수행할 수 있도록 도와주는 메서드들을 '라이프 사이클 메서드'라고 합니다. 클래스 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 Hook을 사용하여 비슷한 작업을 수행할 수 있습니다.

라이프 사이클의 주요 단계
 - 마운팅(Mounting): 컴포넌트가 DOM에 삽입되는 단계
 - 업데이팅(Updating): 컴포넌트의 props 또는 state가 변경되어 재렌더링이 발생하는 단계
 - 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거되는 단계

 

주요 라이프 사이클 메서드
 - constructor(): 컴포넌트 생성 시 가장 먼저 실행되는 메서드로, 초기 state 설정 등을 수행합니다.
 - static getDerivedStateFromProps(): props로 받은 값을 state에 동기화할 때 사용합니다.
 - render(): 컴포넌트 UI를 렌더링하는 메서드입니다.
 - componentDidMount(): 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. 여기서 API 호출 같은 외부 데이터를 불러오는 작업을 수행합니다.
 - shouldComponentUpdate(): 컴포넌트가 업데이트 되기 전에 호출되며, false를 반환하면 업데이트 과정이 중지됩니다.
 - getSnapshotBeforeUpdate(): 업데이트가 일어나기 직전의 DOM 상태를 캡처하기 위해 사용됩니다.
 - componentDidUpdate(): 업데이트가 일어난 후 호출되며, 이전 props나 state에 접근할 수 있습니다.
 - componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출됩니다. 여기서 필요한 정리 작업을 수행할 수 있습니다.