[react] 댓글 기능 구현하기

노마드코더의 ReactJS로 영화 웹 서비스 만들기 코스 중 todolist 만드는 방법을 따라 js 파일 하나로 구현했고, css 파일은 따로 만들지 않았습니다

 

완성된 js 파일은 게시물 하단에서 확인하세요

 

https://nomadcoders.co/react-for-beginners/lobby

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

 

JSX 부분

 

<div>

      <h2>Comment List</h2>

      <form>

        <input

          type="text"

          placeholder="write your list..."

        ></input>

        <button>Click</button>

      </form>

      <hr />

      <ul>

          <li></li>

      </ul>

</div>

 

우선, jsx를 작성할 때는 모든 태그를 하나의 태그로 감싸줘야하기 때문에 <div>로 전체를 감싸주었습니다

 

간단하게 <h2>로 제목을 만들어주고 <form>안에 <input>과 <button>을 넣어줬습니다

 

<hr />로 선을 그어주어 input과 output(댓글이 입력되는 부분)을 나눠주었습니다

 

그리고 실제로 댓글이 입력되는 부분은 list로 만들기 위해 <ul>과 <li>를 사용했습니다

 

 

---

 

 

js 문법 부분

import React, { useState } from "react";

 

const Comment = () => {

  const [input, setInput] = useState("");

  const [arr, setArr] = useState([]);

 

  const onChange = (e) => setInput(e.target.value);

  const onSubmit = (e) => {

    e.preventDefault();

    if (input === "") {

      return;

    }

    setArr((currentArr) => [input, ...currentArr]);

    setInput("");

  };

 

input 부분

const [input, setInput] = useState("");

const onChange = (e) => setInput(e.target.value);

input에 입력되는 값을 저장하기 위해 useState()를 사용했고, input의 기본값은 빈 string으로 지정해주었습니다

input 값이 변할 때마다 저장해줘야 하기 때문에 e(vent)를 인자로 넘겨주고 setInput 함수를 이용해 저장했습니다

 

array 부분

const [Arr, setArr] = useState([]);

const onSubmit = (e) => {

  e.preventDeafult();

  if(input === "") {

    return;

  }

  setArr = (currentArr) => ([input, ...current]);

  setInput("");

}

 

input에 입력된 string을 배열로 받아오기 위해 Arr의 기본값은 빈 배열로 지정해주었습니다

<form>이 submit되면 onSubmit 함수가 작동할 수 있게 만들었습니다

우선, e.preventDeafult();은 이벤트가 일어나도 현재 화면을 유지하도록 합니다

만약 이렇게 작성하지 않으면 input에 입력을 완료한 후 엔터를 치거나 button을 클릭했을 때 페이지가 새로고침됩니다

if(input === "") {return;}은 input에 아무것도 입력되지 않은 경우 리턴값으로 아무것도 주지 않겠다는 것입니다

이렇게 작성하지 않고 하단의 jsx 부분에서 map을 이용해 <li>를 계속 만들어낼 경우 아래와 같이 아무것도 입력되지 않은 <li>가 화면에 출력됩니다

 

if(input === "") { return; }을 주지 않았을 때

 

setArr = (currentArr) => ([input, ...current]); setInput(""); 이 부분을 통해 input이 array로 만들어지도록 합니다

(원하는변수명) => (넣고자하는값, ...원하는변수명) 이렇게 작성하는 것이 규칙입니다

저도 처음에 다른 분들의 코드를 보고 저 ...은 대체 뭘 의미하는 건지 궁금했는데 그냥 저렇게 작성하는 규칙이더라고요

 

그리고 뒤의 setInput("");은 input에 댓글을 입력 후 엔터나 button을 클릭한 뒤에 input에 작성했던 댓글이 지워지도록 합니다

setInput에 아무런 설정을 하지 않는다면 댓글 입력 후에도 input에 댓글이 그대로 남아있습니다

 

이렇게 react 부분을 모두 작성 후 해당하는 값이나 함수를 jsx에 작성해줍니다

 

 

 

주의사항

1. <button>의 기본 타입은 submit인데, 위와 같이 input에 엔터를 치면 submit되도록 한다면 굳이 타입을 지정해주지 않거나 type="submit"으로 명시해줄 수 있습니다

이로 인해 "button", "no type", "reset"은 댓글 기능 구현 시 적절하지 않은 타입입니다

이걸 작성하는 이유는,,,, 제가 처음에 아무 생각없이 button에 type="button"을 줬었기 때문입니다,,,

 

2. <li>를 map을 이용해서 출력되도록 함수를 만들 때, 꼭 key 값을 전달해야 합니다

{arr.map((input, index) => (

          <li key={index}>{input}</li>

        ))}

 

=> key값을 줘야하는 이유 ?

React는 렌더링 할 때 기존 배열과 새로운 배열을 비교해서 변경된 부분만 다시 렌더링하기 때문에,

요소가 변경되었을때 더 빠르고 효율적으로 렌더링 하기 위해 요소 고유의 key 값을 줘야 합니다

 

---

 

완성된 js 파일

import React, { useState } from "react";

const Comment = () => {

  const [input, setInput] = useState("");

  const [arr, setArr] = useState([]);

  const onChange = (e) => setInput(e.target.value);

  const onSubmit = (e) => {

    e.preventDefault();

    if (input === "") {

      return;

    }

    setArr((currentArr) => [input, ...currentArr]);

    setInput("");

  };

  return (

    <div>

      <h2>To Do List</h2>

      <form onSubmit={onSubmit}>

        <input

          value={input}

          type="text"

          placeholder="write your list"

          onChange={onChange}

        ></input>

        <button>Click</button>

      </form>

      <hr />

      <ul>

        {arr.map((input, index) => (

          <li key={index}>{input}</li>

        ))}

      </ul>

    </div>

  );

};

export default Comment;

 

 

 

 

Resources

https://poew.tistory.com/728#:~:text=%F0%9F%94%A5%EC%99%9C%20key%20%EA%B0%92%EC%9D%84,%EC%9D%98%20key%20%EA%B0%92%EC%9D%84%20%EC%A4%80%EB%8B%A4.