[개념] 클래스형 컴포넌트 (2)

💜 클래스형 컴포넌트 활용 💜

할일(Todo)에 대한 컴포넌트를 만들어보자.

import React,{Component} from "react";

class Todo extends Component{
    render(){
        //데이터 선언
        const todo={
            name: "cleaning",
            done: false,
            description: "cleaning my room on weekends"
        }
        //HTML 템플릿 
        return (
            <>
            <h3>name: {todo.name}</h3>
            <h4>done: {todo.done? "finished":"ongoing"}</h4>
            <p>description: {todo.descruption}</p>
            </>
        )
    }
}

export default Todo;

초기 데이터(state) 선언과 이벤트 핸들러 함수는 상황에 따라 생략가능하다.

render 메서드만 존재하는 클래스형 컴포넌트의 형태는 위와 같다.

render 메서드 안에서 todo 객체(데이터)를 선언하고, HTML 템플릿에 데이터를 삽입한 다음 웹화면에 렌더링한다.

import React,{Component} from "react";
import Todo from './Todo';

class App extends Component {
    render(){
        return <Todo></Todo>
    }
}

export default App;

App 컴포넌트에서 Todo 컴포넌트를 가져온 다음 render 메서드 안에서 렌더링 해보면 결과는 다음과 같다.

todo 렌더링 화면

초기 데이터 (state) 선언, 이벤트핸들러 함수, render 함수가 모두 갖춰진 클래스형 컴포넌트의 구조는 다음과 같다.

import React,{ Component } from "react";

class Todo extends Component {
    constructor(props) {
        super(props) // props 상속
        this.state = {  //state 선언
            name: 'cleaning',
            done: false,
            description: 'cleaning my room on weekends'
        }
    }

    //이벤트 핸들러 함수

    changeTodoName=()=>{
        this.setState({name:'learning react'})
    }

    // HTML 템플릿

    render (){
        const {name, done, description} = this.state
        const {user} = this.props
        return(
            <>
            <h2>user: {user}</h2>
            <h3>name: {name}</h3>
            <h4>done: {done? "sinished": "ongoing"}</h4>
            <p>description: {description}</p>
            <button type="button" onClick={this.changeTodoName}>
                change todo name
            </button>

            </>
        )
    }
}

export default Todo;

1. 생성자 constructor 를 사용하여 부모 컴포넌트로부터 props 를 전달받는다.

2. 생성자 안에서 웹화면에 렌더링할 데이터인 state를 초기화 한다.

3. 생성자 다음에는 사용자의 이벤트를 처리하는 이벤트 핸들러 함수를 정의한다.

4. HTMl 템플릿을 렌더링하는 render 메서드를 정의한다.

5. button 요소에는 인란인 방식으로 클릭 이벤트가 설정되어 있다.

처음 예제의 Todo 컴포넌트와 비교하면 render 메서드 내부에 선언한 데이터가 state 객체로 변경되었다.

this 키워드는 Todo 클래스를 가리킨다.

  this.state = {      // state 선언
    	name: "cleaning",
        done: false,
        description: "cleaning my room on weekends"
    }

아래와 같이 APP 컴포넌트에서 Todo 컴포넌트를 사용해보자.

import React,{Component} from "react";
import Todo from './Todo'

class App extends Component {
    render(){
        return 
        <Todo user="Haeryun"></Todo>
    }
}

export default App;

APP 컴포넌트에서 Todo 컴포넌트를 가져온 다음 render 메서드에서 사용해 보자. 이번에는 컴포넌트에 user 라는 속성을 추가로 설정하였다.

 <Todo user="Haeryun"></Todo>

리액트에서는 이러한 속성을 props 라고 한다.

props 는 Todo 컴포넌트 내부로 전달되며, Todo 컴포넌트 내부에서 this.props.user 로 접근하면 "Haeryun" 이라는 사용자 정보를 조회할 수 있다.

import React,{Component} from "react";

class Todo extends Component {
    state = {  //state 선언
        name: 'cleaning',
        done: false,
        description: 'cleaning my room on weekends'
    }

    // 이벤트 핸들러 함수

    changeTodoName = () => {
        this.setState({name: 'learning'})
    }

    //HTML  템플릿

    render(){
        const {name, done, description} = this.state
        const {user}=this.props
        return (
            <>
            	<h2>user: {user}</h2>
            	<h3>name: {name}</h3>
                <h4>done: {done? "finished": "ongoing"}</h4>
                <p> description: {description}</p>
                <button type="button"  
                onClick={this.changeTodoName}
                >change todo name</button>
            </>
        )
    }
}

export default Todo;

생성자를 사용하지 않고 state를 위와 같이 선언하기도 한다.