TypeScript를 사용하여 React에서 클래스 구성 요소로 작업할 때 생성자 내부에서 props와 state를 정의하는 것이 필요하고 필수인지 묻는 질문이 종종 있습니다. 이 질문에 대한 대답은 구성 요소의 특정 요구 사항에 따라 다릅니다. 이 블로그 게시물에서는 생성자를 사용하여 props와 state를 정의하는 시기와 이유는 물론 다양한 접근 방식의 장단점을 살펴보겠습니다.

생성자 사용

생성자를 사용해야 하는 경우:

1. 소품을 기반으로 한 상태 초기화:

상태가 props에 따라 달라지거나 상태를 초기화할 때 추가 논리를 수행해야 하는 경우 생성자가 최선의 선택입니다.

2. 초기 상태 값 설정:

구성 요소의 초기 상태를 설정하려는 경우 생성자를 사용하는 전통적인 방법이 있습니다.

예:

interface IMyComponentProps {
  initialCount: number;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component {
  constructor(props: IMyComponentProps) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return 
Count: {this.state.count}
;
  }
}

생성자를 사용하지 않는 경우

1. 단순 상태 초기화:

상태가 복잡하지 않고 props에 의존하지 않는 경우 생성자 없이 직접 상태 초기화를 사용할 수 있습니다.

2. 복잡한 논리가 필요하지 않습니다.

props나 상태와 관련된 추가 로직을 수행할 필요가 없다면 클래스 수준에서 직접 상태를 설정할 수 있습니다.

예:

interface IMyComponentProps {
  message: string;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component {
  state: IMyComponentState = {
    count: 0,
  };

  render() {
    return 
Count: {this.state.count}
;
  }
}

다양한 접근 방식의 장점과 단점

생성자 사용:

장점:

• 더 복잡한 초기화: 소품을 기반으로 상태를 설정하고 구성 요소가 렌더링되기 전에 추가 논리를 실행할 수 있습니다.
• 제어: 초기화를 정밀하게 제어할 수 있으며 초기화 논리를 쉽게 추가하거나 수정할 수 있습니다.

단점:

• 추가 코드: 생성자를 사용하면 더 많은 코드를 추가할 수 있으며, 이로 인해 특히 초기화가 간단한 경우 구성 요소를 읽기가 더 어려워질 수 있습니다.
• 복잡성 증가: 생성자 없이 간단한 초기화를 수행할 수 있는 경우 복잡성이 추가됩니다.

생성자 외부에서 직접 초기화(상태):

장점:

• 단순성: 간단한 구성 요소에 대한 코드가 적고 코드가 더 깔끔합니다.
• 더 나은 가독성: 직접 상태 초기화를 사용할 때 구성 요소의 가독성이 더 높은 경우가 많습니다.

단점:

• 제한된 유연성: 소품을 기반으로 상태를 쉽게 초기화하거나 복잡한 초기화 로직을 추가할 수 없습니다.

결론

• props를 기반으로 상태를 초기화해야 하거나 구성 요소를 렌더링하기 전에 실행해야 하는 복잡한 논리가 있는 경우 생성자를 사용하세요.
• 상태 초기화를 클래스 수준에서 직접 쉽게 설정할 수 있고 추가 논리가 필요하지 않은 경우 생성자를 사용하지 마세요.

두 접근 방식 모두 정확하며 구성 요소의 복잡성과 특정 요구 사항에 따라 달라집니다. 최신 React 코딩에서는 많은 개발자가 자신의 요구 사항을 충족하는 경우 직접 초기화라는 더 간단한 접근 방식을 선호합니다.