Javascript - Comment 구현하기 완료

---

목차

1.insert

2. delete

3. update

---

 

 

 

Comment 구현하기 2 이어서

<ul class="comment">
    <li class="comment-form">
    	<h4>
        댓글쓰기
        <span>(${this.props.length})</span>
        </h4>
        <form id="commentForm" class="commentForm">
            <span class="ps_box">
                <input
                    type="text"
                    placeholder="댓글입력하세요~~~!"
                    id="content" name="content"
                />
            </span>
            <button type="submit" class="btn">등록</button>
        </form>
    </li>
    <li class="comment-list">
    	<ul class="comment-row" data-index="${item.id}">
                <li>${item.userid}</li>
                <li>
                    <span class="comment-content" data-id="${item.id}">
                    ${this.commentContent(item)}
                    <input type="text" class="comment-update-input" value="${content}" />
                    </span>
                    <span class="comment-delete" data-id="${item.id}">💣</span>
                </li>
                <li>${item.date}</li>
            </ul>
    </li>
</ul>

- comment component로 위의 html처럼 보이게끔 만들어주기위해서

   - form input box를 만들어 작성을 할수있어야하고

   - 등록을 눌러서 작성한 내용을 list에서 볼수있게 하고

   - 작성한 내용을 클릭했을때 input box로 바뀌면서 수정할 수 있어야하고

   - 작성한것을 삭제까지 할수있어야함

 

 

 

 

1.insert

 

- 이벤트 target의 value를 insertItem 메서드에 넣어 input box에 적은 내용을 list에 보여준다.

- 하지만 id가 고정값이라서 배열의 마지막을 찾고 0이라면 +1을 해주는 작업을 해준다.

- state의 comments는 객체안에 배열로 있기때문에 comments.push를 해서 newState에 담아준다.

insertItem(content) {
        const {comments} = this.state;
        const id = comments.length !== 0 ? comments[comments.length - 1].id + 1 : 1;

        comments.push({
            id,
            userid: "보람",
            content,
            date: "2023-10-18",
        });
        
        const newState = [...comments];
        this.setState({...this.state, comments: [...newState]});
    }
    
    
handleSubmit(e) {
        e.preventDefault();
        const {value: content} = e.target.content;

        this.props.insertItem(content);
    }

 

 

 

 

2. delete

 

- 작성한 댓글을 삭제하기 위해서 해당 글에 id를 찾아 삭제하는 방법으로 filter() 메서드를 사용한다.

- 그전에 template에 이벤트를 걸어야하는 태그를 찾아 dataset을 활용해서 id를 찾고 

 

deleteItem(id) {
        const {comments} = this.state;
        const newState = comments.filter((v) => v.id !== id);
        this.setState({...this.state, comments: [...newState]});
    }


setEvent() {
        this.addEvent("click", ".comment-delete", this.delete.bind(this));
    }
    
delete(e) {
        const {dataset} = e.target;
        const id = parseInt(dataset.id);
        this.props.deleteItem(id);
    }

 

 

 

3. update

 

- state에 id를 null값을 주고 id가 같다면 input box가 나오고 아니라면 그냥 텍스트로 둔다.

- keydown 이벤트를 사용하여 작성한글을 바로 수정한다.

- enter를 친다면 수정된 내용을 바꿔준다. ( 상태가 바뀌면 화면이 바뀌는 )

- findIndex()사용하여 id를 찾아준다.

let find = null;
for (let i = 0; i < newState.length; i++) {
    if (newState[i].id === id) {
        find = i;
    }
}
const index = newState.findIndex((v) => v.id === parseInt(id));

 

 

---

※ console.log(e.keyCode) 

- 키보드마다의 번호를 알수있다.

- enter키는 13

 

※ this.setState({...this.state, comments: [...newState]});

- 이걸 반복해서 적는 이유는 리액트를 배우기전에 익숙해지는것도있지만

- 현재 학습하는 내용에서의 state에는 comments만 들어가있지만 다른 데이터를 넣을수도 있기때문에

 

※ 배열메서드!!!!!!