[220422] 리액트로 덧글기능 만들기 (CRUD 중 UD), 생명주기함수

CRUD 중 U 만들기

클릭했을때 input박스가 나오도록 만들기

//App.jsx
componentDidMount(){ //최초실행
    this.setState({
        ...this.state,
        list:[
                //클릭유무를 알 수 있도록 updateflag 추가
                {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true},
...


//CommentList.jsx
handleSubmit = e=> {
    e.preventDefault()
    console.log(this.state.value)
    const obj={
        userid:'ingoo7022',
        content:this.state.value,
        date:'2022-04-21',
        //클릭유무를 알 수 있도록 updateflag 추가
        updateflag:true
    }

//CommentFrom.jsx
import React,{Component} from 'react'

class CommentList extends Component{
    //span 클릭시 안에 들어가있는 내용 출력하기
        //span onClick시 event 매개변수에서 e.target.innerHTML 출력
    handleClick = e => {
        console.log(e.target.innerHTML)
    }

    items = () => this.props.list.map((v,k)=>{
        return(
            <ul className='comment-row' key={k}>
                <li className='comment-id'>{v.userid}</li>
                <li className='comment-content'>
                    {/*삼항연산자를 통해 클릭유무에 따라 값을 바꿈*/}
                    {
                        v.updateflag
                        ? <span onClick={this.handleClick}>{v.content}</span>
                        : <input type="text" />
                    }
                </li>
                <li className='comment-date'>{v.date}</li>
            </ul>
        )
    })

    render(){
        return(
            <li>{this.items()}</li>
        )
    }
}

export default CommentList

 

 

 

 

클릭해서 값을 수정하고 엔터를 치면 수정된 내용이 반영되도록 만들기

//App.jsx
import React, { Component } from 'react'
import Comment from './components/comment/Comment'
import CommentForm from './components/comment/CommentForm'
import CommentList from './components/comment/CommentList'

class App extends Component{
    state={
        value:'hellllo',
        list:[]
    }

    componentDidMount(){
        this.setState({
            ...this.state,
            list:[
                {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true},
                {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true},
                {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true},
            ]
        })
    }


    addList = (obj) => {
        this.setState({
            ...this.state,
            list:[...this.state.list,obj]
        })
    }

    updateList = list => {
        this.setState({
            ...this.state,
            list
        })
    }

    render(){
        const {list} = this.state
        return(
            <>
                <Comment>
                    {/* 여기가 children이 들어가는 공간 */}
                    <CommentForm addList={this.addList} />
                    <CommentList list={list} updateList={this.updateList}/>
                </Comment>
            </>
        )
    }
}

export default App;

//CommentFrom.jsx
import React,{Component} from 'react'

class CommentForm extends Component{
    state={
        value:''
    }

    handleChange = e => {
        // console.log('hello ') 입력확인용
        const {value} = {...e.target}
        this.setState({
            value
        })
    }

    handleSubmit = e=> {
        e.preventDefault()
        const obj={userid:'ingoo7022',content:this.state.value,date:'2022-04-21',updateflag:true}

        this.props.addList(obj)
        this.setState({
            value:'' //입력한후 input창 빈칸만들기
        })
    }

    render(){
        return(
            <li className='comment-form'>
                <form onSubmit={this.handleSubmit}>
                    <span className='ps_box'>
                        <input
                            type="text"
                            className='int'
                            placeholder='댓글을 입력해주세요'
                            onChange={this.handleChange}
                            value={this.state.value}
                        />
                    </span>
                    <input type="submit" className="btn" value="입력" />
                </form>
            </li>
        )
    }
}

export default CommentForm

//CommentList.jsx
import React,{Component} from 'react'

class CommentList extends Component{
   state={
       value:'',
       update:null
   }

    //span 클릭시 안에 들어가있는 내용 출력하기
        //span onClick시 event 매개변수에서 e.target.innerHTML 출력
        //클릭했을때 해당 내용을 가져올 수 있었다
            //클릭했을때는 CommentList의 state에게 저장시킴
    handleClick = i => e =>  {
        // console.log(e.target.innerHTML, i)
        this.setState({
            ...this.state,
            value:e.target.innerHTML,
            update:i
        })
    }
    /*
    이걸 줄여쓴게 윗 코드
    handleClick = (i) =>  {
        console.log(i)
        const eventClick = e => {
            console.log(e)
        }
        return eventClick
    }
    */
    
    handleChange = e => {
        const {value} = {...e.target}
        this.setState({
            ...this.state,
            value
        })
    }

    updateKeyDown = i => e => {
        //수정모드에서 입력한 키를 출력해줌
        // console.log(e.key)

        //엔터를 누르는 순간, 함수 밖으로 나가면서 state값에 변화를 줌
        if(e.key!=='Enter')return
        const {updateList,list} = this.props

        //list
        const newList = [...list]
        list[i].content = this.state.value
        
        this.setState({
            ...this.state,
            update:null,
        })
        //바뀐 state 값 출력함
        // console.log(this.state.value)
        updateList(newList)
    }

    items = () => this.props.list.map((v,k)=>{
        return(
            <ul className='comment-row' key={k}>
                <li className='comment-id'>{v.userid}</li>
                <li className='comment-content'>
                    {
                        this.state.update === k
                        ? <input
                            type="text"
                            value={this.state.value}
                            onChange={this.handleChange}
                            onKeyDown={this.updateKeyDown(k)}
                            className="comment-update-input"
                        />
                        : <span onClick={this.handleClick(k)}>{v.content}</span>
                    }
                </li>
                <li className='comment-date'>{v.date}</li>
            </ul>
        )
    })

    render(){
        return(
            <li>{this.items()}</li>
        )
    }
}

export default CommentList

 

 

 

---

CRUD 중  D 만들기

클릭하면 삭제 이벤트를 실행시킬 문자 x를 넣어준다.

//CommentList.jsx
import React,{Component} from 'react'

class CommentList extends Component{
...
    items = () => this.props.list.map((v,k)=>{
        return(
            <ul className='comment-row' key={k}>
                <li className='comment-id'>{v.userid}</li>
                <li className='comment-content'>
                    {
                        this.state.update === k
                        ? <input
                            type="text"
                            value={this.state.value}
                            onChange={this.handleChange}
                            onKeyDown={this.updateKeyDown(k)}
                            className="comment-update-input"
                        />
                        : (
                            <>
                                <span onClick={this.handleClick(k)}>{v.content}</span>
                                <span className='comment-delete-btn' onClick={()=>this.deleteClick(k)}>
                                    X
                                </span>
                            </>
                        )
                    }
                </li>
                <li className='comment-date'>{v.date}</li>
            </ul>
        )
    })
...

 

 

 

---

 

 

생명주기함수

컴포넌트가 살아났을때, 컴포넌트가 죽었을때를 포착하기 위해서 만든 함수라서 생명주기함수라고 한다

input = React.createRef()
//컴포넌트가 리렌더링 되었을때 -> 상태가 바뀌었을때
componentDidUpdate(){
    console.log('업데이트')
}

//최초로 컴포넌트 렌더가 완료되었을때 실행됨
componentDidMount(){
    console.log('로드')
    //소켓연결
}

//컴포넌트가 사라질때. socket때 많이 사용
componentWillUnmount(){
    console.log('컴포넌트 사라짐')
    //소켓종료
}

 

이 상태로 새로고침해서 서버를 돌리면 다음과 같은 결과가 나온다.