React-Youtube : react 덧글 기능 추가하기

1. 컴포넌트 생성

comment.js를 따로 생성

너무 많은 내용을 다룰 수 있기 때문에 컴포넌트를 새로 생성을 해준다.

 

2. 템플릿 생성

// client > src > components > views > VideoDetailPage > Sections > Comment.js

import React, { useState } from "react";
import Axios from "axios";
import { useSelector } from "react-redux";

function Comment(props) {
  return (
    <div>
      <br />
      <p>Replies</p>
      <hr />
      {/* Comment Lists */}
      {/* Root Comment Form */}
      <form style={{ display: "flex" }}>
        <textarea
          style={{ width: "100%", borderRadius: "5px" }}
          placeholder="코멘트를 작성해주세요."
        />
        <br />
        <button style={{ width: "20%", height: "52px" }}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default Comment;

기본적으로 HTML, CSS를 먼저 적용을 하였다. 이럴 경우 <textarea> 태그는 원래 아무런 입력이 되지 않는다. 그렇기 때문에 여기서 onClick이벤트를 입력하여 내가 텍스트를 입력하였을 때 반응을 보이기 위한 구현을 해야 한다.

(하지만, 필자가 다시 지워보고 테스트할 땐 특별한 문제가 없었다.)

 

3. onClick 생성

다음으로는 onClick 이벤트를 생성해보았다.

// client > src > components > views > VideoDetailPage > Sections > Comment.js

import React, { useState } from "react";
import Axios from "axios";
import { useSelector } from "react-redux";

function Comment(props) {
  const [commentValue, setcommentValue] = useState("");
  const handleClick = (e) => {
    setcommentValue(e.currentTarget.value);
  };
  return (
    <div>
      <br />
      <p>Replies</p>
      <hr />
      {/* Comment Lists */}
      {/* Root Comment Form */}
      <form style={{ display: "flex" }}>
        <textarea
          style={{ width: "100%", borderRadius: "5px" }}
          placeholder="코멘트를 작성해주세요."
          onChange={handleClick}
        />
        <br />
        <button style={{ width: "20%", height: "52px" }}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default Comment;

다음과 같이 입력을 할 경우, 이제 어떠한 입력값을 넣어도 값이 입력이 되는 것을 확인할 수 있다.

 

TMI. currentTarget  VS target

currentTarget : 이벤트 핸들러가 부착된 것

 

4. onSubmit

다음으로는 입력한 값을 서버로 보내는 동작을 구현할 것이다.

// client > src > components > views > VideoDetailPage > Sections > Comment.js
import React, { useState } from "react";
import Axios from "axios";
import { useSelector } from "react-redux";

function Comment(props) {
  const [commentValue, setcommentValue] = useState("");
  const user = useSelector((state) => state.user);
  const videoId = props.match.params.videoId;

  const handleClick = (e) => {
    setcommentValue(e.currentTarget.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();

    const variables = {
      content: commentValue,
      writer: user.userData._id,
      postId: videoId,
    };
    Axios.post("/api/comment/saveComment", variables).then((response) => {
      if (response.data.success) {
      } else {
        alert("덧글 저장하지 못하였습니다.");
      }
    });
  };
  return (
    <div>
      <br />
      <p>Replies</p>
      <hr />
      {/* Comment Lists */}
      {/* Root Comment Form */}
      <form style={{ display: "flex" }} onSubmit={onSubmit}>
        <textarea
          style={{ width: "100%", borderRadius: "5px" }}
          placeholder="코멘트를 작성해주세요."
          onChange={handleClick}
          value={commentValue}
        />
        <br />
        <button style={{ width: "20%", height: "52px" }} onClick={onSubmit}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default Comment;

writer부분은 이전에 localstorage에서 가져오는 방법(localStorage.getItem("userId"))을 이용해도 되고, 현재 방법은 리덕스를 통해 가져온 아이디(user.userData._id)를 활용하였다.

Redux DevTools에서 유저 아이디를 어디서 가져오는지 확인 가능하다.

다음과 같이 Redux DevTools에서 유저 아이디가 어디 있는지 확인하여 입력할 수 있다.

 

console.log로 잘 들어오는지 확인하기

마지막으로 콘솔로 확인을 하면 된다. content값을 입력 후 Submit버튼을 클릭할 때 아래와 같이 잘 나오면 된다.

 

일부 params에 대한 오류는 생략하겠습니다. :)

 

오늘의 코드 바로보기