옛날, 리액트에서는, 컴포넌트를 만들 때,

function 안에 안쓰고, class 를 사용하여 만들었으며 기본형은 다음과 같다.

Class Component 기본형

class Modal2 extends React.Component {
  constructor() {
    super()
  }
  render() {
    return (
      <div>안녕</div>
    )
  }
}

Class 에서의 state 생성과 수정

class Modal2 extends React.Component {
	constructor() {
		super();
		this.state = {
			name: 'kim',
			age: 20,
		};
	}
	render() {
		return (
			<div>
				<button
					onClick={() => {
						this.setState({ age: 21 });
					}}
				>
					{' '}
					나이 변경{' '}
				</button>
				안녕 {this.state.name} {this.state.age}{' '}
			</div>
		);
	}
}

위처럼 constructor 안에서 state들을 생성해주고 그 후 setState를 사용하여 변경하여 준다.

Props 사용방법

class Modal2 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			name: 'kim',
			age: 20,
		};
	}

위와 같이 constructor 함수 super 안에 props를 전달받아서 사용한다.