Component 사용하기(class형 컴포넌트)

Component 사용하기(class형 컴포넌트)

class형 컴포넌트에는 Component와 PureComponent가 있다. 두 컴포넌트 모두 porps와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. Component에서는 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import ComponentClass from './R027_ComponentClass.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <ComponentClass/>
    </div>
  );
}

export default App;

R027_ComponentClass.js

import React,{Component} from "react";

class R027_ComponentClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      StateString: 'react',
      StateArrayObj: ['react', {react:'200'}]
    }
  }

  buttonClick = (type) => {
    if(type == 'String'){
      this.setState({Statestring: 'react'});
    }else{
      this.setState({StateArrayObj: ['react',{react:'200'}]});
    }
  }

  render() {
    console.log('render() 실행')
    return(
      <div>
        <button onClick={e => this.buttonClick('String')}> 문자열 변경</button>
        <button onClick={e => this.buttonClick('ArrayObject')}>
          객체 배열 변경</button>
      </div>
    )
  }
}

export default R027_ComponentClass;

코드 해설

• Component 클래스를 임포트해 상속받아 사용한다.
• state에 문자열 변수와 객체가 포함도니 배열 변수를 선언하고 초기값을 저장한다.

Line 24

• [문자열 변경] 버튼을 클릭하면, line7에서 선언한 문자열 변수와 동일한 state 값을 setState() 함수로 선언 및 초기화한다. 이때 컴포넌트는 state 값이 변경됐다고 간주해 render() 함수를 실행한다.

Line 25~26

• [객체 배열 변경] 버튼을 클릭하면, line 8에서 선언한 배열 변수와 동일한 state 값을 setState() 함수로 선언 및 초기화 한다. 이때 컴포넌트는 state 값이 변경됐다고 간주해 render() 함수를 실행한다.
• setState() 함수로 실행한 값은 이전에 있던 state 변수값과 동일하더라도 Component에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다.

결과 화면