First Project(영화비교) Front End-④

슬기로운 코딩생활·2020년 12월 29일
0
post-thumbnail

오늘은 댓글을 작성할 수 있는 기능을 구현해 보았다. 이것으로 오늘하루 순삭....😎

1.댓글 기능 구현

일단 이전에 포스터를 두가지 클릭해서 비교하는 페이지로 넘어가는 것까진 했고, 넘어간 페이지에서 두 영화에 대해 댓글을 쓸 수 있는 것을 만들어주었다.

보면 두개의 영화포스터가 위에 존재하고 아래에 comment를 작성할 수 있는 기능을 만들었다. 이거 만드는데 하루를 쓴것으로 만족한다. 처음에는 구현할 수 있을 지 모르겠다라고 생각했지만 하긴 했다.

 constructor(props) {
    super(props);
    this.state = {
      name: "",
      comment: "",
      replies: [],

일단 comments라는 jsx파일을 만들어주었고 class Component를 사용하였다.

hadleInputValue = (e) => {
    this.setState({ comment: e.target.value });
  };

  pressEnter = (e) => {
    if (e.key === "Enter" && this.state.comment) {
      this.addComment();
    }
  };

  addComment = () => {
    this.setState({
      replies: this.state.replies.concat(this.state.comment),
      comment: "",
    });
  };

그 다음은 무엇을 해야할까라는 생각을 했고 댓글을 쓸때 그 타겟의 value를 가져와야했기에 타겟을 setState로 comment에 지정해주고 그 다음 버튼을 누르거나 Enter키를 누르면 입력이 가능하게끔 메소드를 하나 만들어 주었다. 그다음 작성된 댓글을 하나의 배열안에 concat()으로 넣어준다. 그러므로써 댓글이 작성됨에 따라 위의 사진에 보이는 댓글창에 하나씩 등록이 된다.

<div className={styles.commentsarea}>
            <section className={styles.comments}>
              {this.state.replies.map((comment) => (
                <div>{comment}</div>
              ))}
            </section>
          </div>

그리고 위와 같이 코드를 작성했고 배열 안에 들어가 있는 댓글들을 map()메소드를 통해 나열해준다. 그래서 위와 같은 사진의 댓글창이 완성이 된다.
뭔가 하나 둘씩 완성돼 가는 페이지를 보고 있자니 재밌고 보람을 느끼게 된다. 이틀만 지나면 또 쉬니까 이틀동안 열심히 달려보자!

오늘은 여기까지.....
다음화에 계속

0개의 댓글