[React]9 todolist class형 컴포넌트로 만들기

todolist를 클래스형 컴포넌트로 만들어보겠다  바로 ㄱㄱ

 

우선은 html구조부터만들어준다

 

Classiteration.js

import React,{Component} from 'react'
class Classiteration2 extends Component{
    render(){
        return(
            <div>
                <input/>
                <button>추가</button>
                <ul>
                    <li>할일1<button>삭제</button></li>
                </ul>
            </div>
        )
    }
}
export default Classiteration2

 

 

기본화면구성

여기서부터는 함수형에서 했던 것과 똑같이 필요한 기능의 함수들을 하나씩 만들어서 넣어주고

상태값도 만들어서 관리해주면 된다.

class Classiteration2 extends Component{
    state={
        list:[],
        input:""
    }
    Change = (e)=> {
        this.setState({
            ...this.state,
            input:e.target.value
        })
    }
    render(){
        const{list,input} = this.state
        return(
            <div>
                <input value={input} onChange={this.Change}/>
                <button>추가</button>
                <ul>
                    <li>할일1<button>삭제</button></li>
                </ul>
            </div>
        )
    }
}

constructor를 쓰지 않고 state로 상태값객체를 만들어주고 render메서드 안에서 변수에 할당해서

input태그 안에 넣어주고 input태그 값이 변할 때 실행될 메서드  Change도 만들어줬다.

클래스에서는 메서드이기 때문에 this. 메서드로 접근해서 사용한다

Change 함수는 state에 원래 들어있던 값들을 다시 저장해주고 input부분만 입력되고 있는

부분들이 들어갈 수 있게 써줬다.

class Classiteration2 extends Component{
    state={
        list:[],
        input:""
    }
    Change = (e)=> {
        this.setState({
            ...this.state,
            input:e.target.value
        })
    }
    onAdd = ()=>{
       const nextlist = [...this.state.list,{id:this.state.list.length,text:this.state.input}] 
        this.setState({
            list:nextlist,
            input:""
        })
    }

    render(){
        const{list,input} = this.state
        let lists = list.map(li=><li key={li.id}>{li.text}<button>삭제</button></li>)
        return(
            <div>
                <input value={input} onChange={this.Change}/>
                <button onClick={this.onAdd}>추가</button>
                <ul>
                    <li>할일1<button>삭제</button></li>
                    {lists}
                </ul>
            </div>
        )
    }
}

 

여기서는 버튼을 누를 때 setState로 리스트를 추가해주고 input은 비운다 추가된 list값은 

reder 메서드 안에서 map함수로 html태그형태로 바꿔주고 lists안에 저장한다.

이제 삭제하기만 하면 끝~

class Classiteration2 extends Component{
    state={
        list:[],
        input:""
    }
    Change = (e)=> {
        this.setState({
            ...this.state,
            input:e.target.value
        })
    }
    onAdd = ()=>{
       const nextlist = [...this.state.list,{id:this.state.list.length,text:this.state.input}] 
        this.setState({
            list:nextlist,
            input:""
        })
    }
    del=(id)=>{
        const nextlist = this.state.list.filter(li=>li.id !== id)
        this.setState({
            ...this.state,
            list:nextlist
        })
    }

    render(){
        const{list,input} = this.state
        let lists = list.map(li=><li key={li.id}>{li.text}<button onClick={()=>this.del(li.id)}>삭제</button></li>)
        return(
            <div>
                <input value={input} onChange={this.Change}/>
                <button onClick={this.onAdd}>추가</button>
                <ul>
                    <li>할일1<button>삭제</button></li>
                    {lists}
                </ul>
            </div>
        )
    }
}

 

함수형에서 쓰던 거랑 똑같이 id를 받아서 list의 id와 다른 요소들만 nextlist에 저장해서 setState로 넣어준다.

 

사실 클래스형이라고 함수형과 크게 다르지 않다. 메서드를 사용할 때 앞에 this만 좀 잘 붙여주고 

상태를 변경하는 함수가  setState라는 것만 잘 기억하고 쓰면 크게 어렵지 않게 바꿀 수 있을 것 같다.