리액트에서 댓글 창을 만들고 싶다면

개요

리액트에서 프로젝트 파일을 옮겨 기능을 구현해야한다.
바닐라 자바스크립트보다 편리하다고 하는데,
초심자 눈에는 코드의 생략이 오히려 혼란스러웠다.
이전에는 쿼리셀렉터로 정확하게 이름을 지칭할 수 있었다면, 리액트에선 그 과정을 생략하고
직접적으로 설명하니 오히려 가독성이 떨어지는 기분이였다.

아무튼 컴포넌트 별로 관리한다는 것 자체는
편리했지만, props와 useState를 제대로 이해한다면 쉬울 듯 하다.

로직 정리

댓글을 만들기 위해서 고안한 로직을 말로 풀어서 정리해보자.

글을 놓을 공간을 불러와서, 인풋 값을 감지한 다음 Submit 이벤트가 일어날 때마다
엘리먼트를 생성해주면 되지 않을까?

이를 구현하기 위해선, input value를 감지해서 데이터를 들고와
엘리먼트의 요소로 던져줄 수 있는 방법이 필요하다.

댓글이 여러개로 달릴 수 있으니, 배열로 만들어 관리해주는 것이 좋겠다.
그리고 원하는 값을 들고 올 수 있도록, 객체화해서 key 값을 통해 접근한다면 로직을 최소화할 수 있을 듯 했다.
물론 쉽지는 않을 듯 하다.

배열에 객체 덩어리가 하나씩 추가될때마다
useState의 영향으로 계속해서 리렌더되며 정보를 업데이트 하는 방식이다.

댓글을 삭제하는 기능은 아마도 여기서 filter로 선택된 객체를 제외하고
배열에 다시 담아 useState로 리렌더 해주면 될 듯 하다.

코드화

메인 컴포넌트에 위치한 함수

  const [comments, setComments] = useState([]);
  const [inputValue, setInputValue] = useState("");

  function addComment(e) {
    e.preventDefault();
    setComments([
      ...comments,
      { id: e.target.id, name: "석영", text: inputValue },
    ]);
    setInputValue("");
  }

  function inputChange(e) {
    setInputValue(e.target.value);
  }

메인에서 받은 props를 바탕으로 전개되는 commens 컴포넌트다.

import React from "react";
import Comment from "../comment/Comment";

function Comments({ commentsList }) {
  return (
    <ul className="commentPostList">
      {commentsList.map((item, id) => (
        <Comment key={id} comment={item} />
      ))}
    </ul>
  );
}

export default Comments;

최하위 컴포넌트는 Comment로, comments내 배열로 존재하는 댓글 객체들을 하나하나 풀어 컴포넌트에 배치된다.

import React from "react";

function Comment({ comment }) {
  return (
    <li className="commentPost" key={comment.id}>
      <span>{comment.name}</span>
      <div>{comment.text}</div>
      <i className="fa-solid fa-xmark deleteBtn" />
    </li>
  );
}

export default Comment;

결과물

댓글이 무사히 들어가는 것을 볼 수 있지만
아무것도 없을때도 입력되는 현상을 볼 수 있었다.

조건문을 걸어서 disabled를 활성화할건지
빈 문자열은 입력을 받지 않는 함수를 구성할건지는 고민이 필요할 듯 하다.

성장 포인트

아래 사진은 props가 어떤 형태로 전달되는지를 그림으로 표현했다.
매번 객체로 던져주는 방식으로, main 컴포넌트에서 comments로 전달될 때의 상황이다
key로 변수명이 들어가고, value로 state에서 지정해둔 배열이 들어가는 꼴이다.

아직도 잘 모르겠다.
어떻게 구현하는지 이론적인 공부가 필요할 듯 하다

기능을 구현하는데 꼬박 하루가 넘게 걸렸다.
간단해 보이는 기능이지만 나에겐 고도화된 기술이다.
주변의 동기들이 쉽게 처리하는 것을 볼수록 맘이 급해져가지만

기본적인 지식 없이 이를 이해하는 것은 오히려 역효과를 불러왔다.
언제나 기본적인 지식이 가장 중요하다는 것을 기억하자.