[React 퀵스타트] 5장 - 클래스 컴포넌트 (1)

5.1 함수 컴포넌트와 클래스 컴포넌트

클래스 컴포넌트를 이용하는 이유

• 클래스 컴포넌트는 함수 컴포넌트에서는 지원하지 않는 다양한 생명주기 이벤트 훅들이 제공됩니다.
• 과거에는 리액트 함수 컴포넌트를 이용하여 상태를 이용하거나 생명주기 이벤트를 사용할 수 없었습니다만, 리액트 16.8 버전 부터는 훅을 이용하여 생명주기 이벤트 기능이 제공되기 시작하였습니다.

5.2 클래스 컴포넌트 작성방법

클래스 컴포넌트는 React.Component<PropsType, StateType>을 상속받도록 작성합니다.

• 만약 속성이나 상태를 사용하지 않는다면, 제네릭 문법부분을 생략하거나 {}와 같이 비어있는 객체로 지정할 수 있습니다.
• 클래스 컴포넌트의 기본 형태

  type Props = {}
  
  type State = {}
  
  class Test extends Component<Props, State> {
  	state = {}
  	render() = {
  		return (
  			<div> Test </div>
  		)
  	}
  }

• 속성만 사용하는 경우

  type TestProps = {
  	name: string;
  	age: number;
  }
  
  class Test extends component<TestProps> {
  	render() {
  		return <div> {this.props.name} 님의 나이는 {this.props.age}입니다. </div>
  	}
  }

  • 전달받은 속성은 this.props.name과 같이 this 식별자를 이용하여 컴포넌트 인스턴스의 props 속성을 이용합니다.
  • 상태는 this.state.name의 형식으로 접근할 수 있습니다.
• 상태만 사용하는 경우

  type TestState = {
  	name : string
  }
  
  class Test extends Component<{}, TestState> {
  	state : TestState = {
  		name : '홍길동'
  	}
  	render() {
  		return <div> 이름은 {this.state.name}입니다. </div>
  	}
  }

• 클래스 컴포넌트의 속성으로 함수와 메서드를 전달할 때는 함수 컴포넌트이 속성을 정의할 때와 마찬가지로 (format: string) ⇒ void 와 같은 형태를 사용합니다.

  • 만약 인자 형식과 리턴값을 알 수 없다면 Function을 지정합니다.

    type Props = {
    	formataString: string;
    	changeFormat: (format: string) => void // or changeFormat: Function
    }