1. 상태(state)란?

상태(state)는 React 컴포넌트에서 동적인 데이터를 관리하는 방법이다.

상태는 사용자의 입력이나 외부 데이터에 따라 변할 수 있으며, 상태가 변할 때마다 React는 해당 컴포넌트를 다시 렌더링하여 최신 상태를 화면에 반영한다.

상태는 보통 useState라는 훅을 통해 관리하며, 클래스 컴포넌트에서는 this.state와 this.setState를 사용한다.

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

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

이 예시에서 count는 상태이며, setCount를 통해 상태를 업데이트한다.

2. 클래스와 함수형 컴포넌트의 흥망성쇠

React는 처음에 클래스 컴포넌트만을 지원했다. 클래스 컴포넌트는 상태 관리와 생명주기 메서드를 포함하는 복잡한 컴포넌트를 작성할 수 있게 해주었다. 그러나 2018년 React 버전 16.8에서 훅(Hooks)이 도입되면서 함수형 컴포넌트에서도 상태를 관리하고 생명주기를 처리할 수 있게 되었으며, 이로 인해 함수형 컴포넌트가 주류가 되었다.

함수형 컴포넌트는 더 간결하고, 테스트하기 쉬우며, 불필요한 복잡성을 줄일 수 있기 때문에 점차적으로 클래스 컴포넌트를 대체하게 되었다. 현재 대부분의 React 개발자들은 함수형 컴포넌트를 선호한다.

3. 컴포넌트 리렌더링이란 무엇이고 어떻게 동작하는가?

컴포넌트 리렌더링은 React에서 상태나 props가 변경되었을 때 해당 컴포넌트와 그 하위 컴포넌트가 다시 렌더링되는 과정을 의미한다. 리렌더링은 React가 UI를 최신 상태로 유지하는 중요한 메커니즘이다. 상태나 props가 업데이트되면 React는 그에 따라 컴포넌트를 다시 평가하여 UI를 업데이트한다.

리렌더링 과정에서 React는 이전 렌더링 결과와 새로운 렌더링 결과를 비교하여 필요한 부분만 DOM에 반영하는데, 이 과정이 "재조정(Reconciliation)"이다.

4. 리렌더링을 하는 방법

리렌더링을 트리거하는 가장 일반적인 방법은 상태를 업데이트하는 것이다. 예를 들어, useState로 상태를 업데이트하거나, 부모 컴포넌트에서 전달된 props가 변경되면 자동으로 리렌더링이 발생한다.

또한, forceUpdate 메서드를 사용해 강제로 리렌더링을 발생시킬 수 있지만, 이는 잘 사용되지 않는다. 함수형 컴포넌트에서는 상태 변경과 관련된 함수를 호출함으로써 리렌더링이 발생한다.

5. 컴포넌트의 다양한 생명주기와 이것을 어떻게 다룰 것인가

컴포넌트는 생성, 업데이트, 소멸의 과정에서 다양한 생명주기 메서드를 가지고 있다.