[과제] 클래스형 컴포넌트 (3)

💜 클래스형 컴포넌트 사용하기 💜

다음 예제는 동물에 대한 정보를 화면에 출력하는 Animal 컴포넌트이다.

import React from "react";

class Animal extends React.Component {
    state = {
        type: 'cat',
        name: 'meyow',
        size: 'smal',
        sound: 'low',
        appearence: 'cute'
    }

    render(){
        const {type, name, size, sound, appearence} = this.state
        return (
            <>
                <h1>동물 정보</h1>
                <h3>종류 - {type}</h3>
                <h3>이름 - {name}</h3>
                <h3>크기 - {size}</h3>
                <h3>소리 - {sound}</h3>
                <h3>생김새 - {appearence}</h3>
            </>
        )
    }
}

export default Animal;

state 는 동물에 대한 정보를 담고 있는 초기 데이터이다.

render 메서드에서 state 를 조회할 때는 this 로 접근한다.

this 는 Animal 클래스를 의미한다.

구조분해(distructuring assignment) 를 이용하여 state 객체의 프로퍼티를 각각의 변수에 따로 저장하였다.

render 메서드는 동물에 대한 정보를 DOM 객체로 생성한 다음 반환한다.

import Animal from './Animal'

function App() {
    return (
        <div ClassName="App">
            <Animal/>
        </div>
    )
}

export default App;