댓글4. 기능구현(U)

1. span에 줄 onClick 이벤트 함수 선언

1-1. 현재 타겟이 되는 span의 내용 가져오기

handleClick  = e => {
    console.log(e.target.innerHTML)
}

 

1-2. items의 li 수정해서 span에 onClick 이벤트 주기

• 렌더될 때는 content의 내용이 나타나고, span 클릭 시 handleClick 이벤트 실행

items = () => this.props.list.map((v, k) => {
    return (
        <ul className="comment-row">
            <li className="comment-id">{v.userid}</li>
            <li className="comment-content">
                <span onClick={this.handleClick}>{v.content}</span>
            </li>
            <li className="comment-date">{v.date}</li>
        </ul>
    )
})

 

 

2. 상태를 저장할 state 선언

2-1. 클릭 시 content를  저장하기 위해 CommentList 컴포넌트에 state값 주기

 

상태의 update 속성은 클릭 시, items 배열의 k 값으로 변경시키기 위해

처음 state 선언 시에는 null 값을 준다.

 

state = {
    value: '',
    update: null
}

 

2-1. span에 준 onClick 이벤트 함수 내용 수정

 

• 클릭 시 현재 타겟이 되는 span 엘리먼트의 내용이 state의 value 값으로 변경되며
• value값을 컴포넌트의 state에 저장
• render 메서드 실행

 

handleClick  = e => {
    this.setState({
        ...this.state,
        value: e.target.innerHTML
    })
}

 

 

3. 조건부 렌더링

updateflag값이 잘 나오는 것 확인했다면

이제 commentList 컴포넌트의 items 배열의 content가 들어가는 li 엘리먼트의 내용을 조금 수정해보자

 

 

해당 li 엘리먼트는

 

 

1. 유저가 인풋에 입력한 내용이 렌더되는 공간이기도 하며,
2. 입력한 내용을 클릭했을 때 state의 update 값을 확인하여
3. updateflag값이 list 배열의 키값과 같은 경우 onClick 이벤트를 실행,
4. updateflag값이 list 배열의 키값과 다른 경우 댓글을 수정할 input을 렌더하는 공간이다.

 

 

따라서, 아래와 같이 state의 update 값을 확인해서 렌더를 다르게 하는 조건부 렌더링을 위한 코드를 작성해보자.

편의를 위해 삼항연산자로 작성하자!

 

3-1. 삼항연산자로 updateflag값에 따라 렌더 달라지게 하는 코드 작성

<li className="comment-content">
    {
        this.state.update === k
        ? <input type ="text" value={this.state.value}/>
        : <span onClick={ () => { this.handleClick } }>{v.content}</span>
    }
</li>

 

 

삼항연산자의 해석이 어렵다면,

아래 링크의 하단의 <참고>를 읽어보자!

https://yellow-w.tistory.com/227?category=1039072 

 

 

 

3-2. 댓글을 수정할 input 박스에 기존에 입력했던 댓글 내용 가져오기

 

앞서,

handleClick 이벤트를 걸어서 선언한 state의 값을 value 값으로 수정하는 코드를 작성해두었으므로

 

 

아래와 같이 input 엘리먼트에 value 값으로 상태의 state value값을 대입해주면

input 박스 클릭 시 기존에 입력했던 댓글 내용을 가지고 올 수 있다.

 

{
    this.state.update === k
    ? <input type ="text" value={this.state.value}/>
    : <span onClick={ () => { this.handleClick } }>{v.content}</span>
}

 

 

현재까지 구현한 코드를 dev tool로 확인해보면 다음과 같다.

 

새로운 댓글을 입력하면 상태의 value 값이 빈 문자열인 ''였다가,

댓글의 content를 클릭하면 state값이 기존에 유저가 입력했던 content로 변경되는 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

4. 삼항 연산자의 온클릭 이벤트 수정

{
    this.state.update === k
    ? <input type ="text" value={this.state.value}/>
    : <span onClick={ () => { this.handleClick(k) } }>{v.content}</span>
}

 

 

현재 e를 매개변수로 받고 있는 handleClick 함수에

• k라는 인자값을 받기 위한 i라는 매개변수를 작성하기 위해 고차 함수로 코드 수정
• 클릭 시 update 값을 k로 변경시켜 주기 위해 update에 매개변수 i값 부여

 

handleClick  = (i) => e => {
    this.setState({
        ...this.state,
        value: e.target.innerHTML,
        update: i
    })
}

 

 

참고로 해당 코드의 논리는 아래 함수와도 같다

 

handleClick = i => {
    const eventClick = e => {
        console.log(e)
    }
    return eventClick
}

 

 

<참고>
고차함수를 쓰는 경우:

이벤트를 작동시키기 위한 e 변수를 사용하고 있지만,
추가적인 인자값을 넣고 싶은 경우

 

5.

댓글을 쓸 때마다 상태를 업데이트 하기 위해 Input에 onChange 이벤트 작성

{
    this.state.update === k
    ? <input 
        type ="text" 
        value={this.state.value}
        onChange={this.state.value}
        className="comment-update-input"    
    />
    : <span onClick={ () => { this.handleClick(k) } }>{v.content}</span>
}

 

handleChange = e => {
    const {value} = {...e.target}
    this.setState({
        ...this.state,
        value
    })
}

 

6. 인풋 이벤트 추가

onKeyDown={this.updateKeyDown}

 

 

updateKeyDown = e => {
console.log(e.key)
}