11. class 이용

서론

컴포넌트를 만들 때 function 을 이용하면 되는데 예전 리액트에서는 class 문법을 사용했다고 한다. 예전 리액트 코드를 보거나 짜야하는 일도 생길 수 있으니 class 문법 사용법을 살펴볼 것이다.

 

 

본론

class 구조

 

class를 사용해서 컴포넌트를 생성하려면 React.Component를 상속받고 클래스명을 지정해준다. 기본적으로 생성자를 생성하고 super() 함수를 이용해 부모 클래스의 생성자를 호출하여 부모 클래스가 가진 속성을 초기화할 수 있다. 또한 render 함수를 이용해 컴포넌트의 JSX 또는 UI 요소를 반환해준다. return 안에 축약할 html을 적어주면 된다.

 

** 요약

- render() : 클래스 컴포넌트에서 필수이다. UI를 렌더링하는 함수이므로 반드시 필요하다.

- constructor() : state를 초기화하거나, 생성자에서 어떤 특별한 작업을 해야될 때 사용된다. state나 초기화 작업이 필요없다면 사용하지 않아도 무방하다.

- super() : 생성자를 생성한다면 필수이다. 해당 함수를 사용하지 않는다면 this에 접근할 수 없고, 오류가 발생한다.

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

 

 

state 생성하기

 

클래스 컴포넌트에서 state를 만들려면 this.state라는 변수를 만들고 object 형식으로 state를 쭉 나열하면 된다. state를 사용하고 싶은 곳에 'this.state.state 이름'을 쓰면 된다.

class Modal2 extends React.Component {
  constructor() {
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }
  render() {
    return (
      <div>안녕 {this.state.name}</div>
    )
  }
}

 

 

state 변경하기

 

state를 변경하려면 useState() 함수를 이용한다고 했는데 클래스 문법에서는 this.setState라는 기본함수를 사용하면 된다. this.setState{} 소괄호 안에 새로운 state를 넣으면 state가 변경된다.

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

 

 

props 사용하기

 

props를 사용하려면 생성자와 usper 함수에 매개변수로 props를 입력하고 원하는 위치에 'this.props.props 이름'을 적어주면 된다.

class Modal2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name : 'kim',
      age : 20
    }
  }
  render() {
    return (
      <div>안녕 {this.props.props이름} </div>
    )
  }
}