[React] - Class 컴포넌트

kang gicheon·2023년 7월 17일

React

목록 보기

5/10

리액트에서 컴포넌트를 제작시 function을 이용해 컴포넌트를 제작하지만 class 문법을 사용해서도 컴포넌트를 만들 수 있습니다. 예시 코드를 이용해 만들어 보겠습니다

Class 컴포넌트 만드는 법

class test extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <div>안녕</div>
    )
  }

}

test라는 컴포넌트 이름을 먼저 작명합니다

constructor(), super(), render() 함수 3개를 작성해 class 컴포넌트의 템플릿을 먼저 작성합니다

HTML의 축약을 위해서 사용하는게 컴포넌트이므로 return 안에 축약할 HTML을 적습니다

이후에 테스트 컴포넌트를 이용할때마다 div값에 안녕이 저장되어 출력이 됩니다.

Class 컴포넌트에서 state를 만드는 방법

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

  render(){
    return (
      <div>안녕 { this.state.name }</div>
    )
  }

}

this.state라는 임시 변수를 만들고 object 형식으로 state를 나열합니다.

state를 사용한다면 {this.state.state이름}으로 작성해서 사용합니다.

Class 컴포넌트에서 state 변경

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

  render(){
    return (
      <div>안녕 { this.state.age }
        <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
      </div>
    )
  }

}

state 변경을 원할시 this.setState라는 기본함수를 제작하여 사용합니다(작명 자유)

소괄호 안에 새로운 state를 넣으면 기존 state가 업데이트 되어 출력됩니다.

Class 컴포넌트에서 props를 사용하려면

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

  render(){
    return (
      <div>안녕 { this.props.프롭스이름 }</div>
    )
  }

}

constructor, super에 props 파라미터를 등록합니다

this.props 사용해 출력합니다

kang gicheon

느리지만 깊게 개발을 공부합니다

이전 포스트

[React] - Input 공부하기

다음 포스트

[리액트] - Router활용

1개의 댓글

이태균

2023년 7월 18일

소중한 정보 감사드립니다!

답글 달기