[React] 댓글기능 구현

📖요즘 리액트를 어느정도 공부하면서 내 힘으로 간단한 결과물을 만들어보고 싶다는 생각에 블로그? SNS?와 같은 형식의 게시물과 댓글과 좋아요를 구현할 수 있는 페이지를 만들고 있다.

하나의 싱글페이지를 만드는 것도 이렇게 많은 시행착오가 필요한 걸 겪어보니, 아직 갈 길이 많이 멀다는 생각이 들었다😥

이 글은 이번 페이지를 구현하면서 내가 겪었던 오류들과 이를 해결한 방법과 왜 그렇게 써야만하는지 그 이유에 대해서 써보려고한다.

---

 

이번에 겪은 오류는 input태그로 이름과 댓글의 내용을 입력받아 댓글을 띄우는 기능을 구현하고 있었는데, 입력받은 내용들이 뜨지 않고 빈 칸이 뜨는 것이었다.

댓글의 입력을 받는 코드가 작성되어있는 commentInput.js의 코드는 아래와 같다.

 

import React, { useCallback, useState } from 'react';
import { MdAdd } from 'react-icons/md';
import './CommentInput.css';

const CommentInput = ({ onInsert }) => {
    const [value, setValue] = useState({
        name: '',
        content: ''
    });

    const onChange = useCallback(
        (e) => {
            setValue(e.target.value)
        },
        [value]
    )

    const onSubmit = useCallback(
        e => {
            onInsert(value.name, value.content);
            setValue({
                name: '',
                content: ''
            });

            e.preventDefault();
        },
        [onInsert, value],
    );

    return (
        <form className="CommentInsert" onSubmit={onSubmit}>
            <input classNames="inputNames"
                placeholder="이름"
                value={value.name}
                onChange={onChange}
            />
            <input placeholder="댓글"
                value={value.content}
                onChange={onChange}
            />
            <button type="submit">
                <MdAdd />
            </button>
        </form>
    )
}

export default CommentInput;

 

이 코드의 결과로는 아래와 같은 사진처럼 나오게 되었다.

 

댓글창

위의 사진처럼 이름과 댓글 내용이 떠야하는데, 입력을 받으면 아래처럼 아무것도 작성되지 않은 댓글창이 나온다는 버그가 있었다. 과연 어떤 곳이 문제였을까?

처음에는 코드를 전체적으로 살펴보면, 입력받는 곳에서 얘를 name, content로 인식을 못하는거 아닐까? 라는 생각에 그 부분을 다시 살펴보았었다. 그래서, 엔터를 치면 데이터가 onSubmit로 가서 onInsert로 가기때문에 이 두 함수를 살펴보았지만 마땅한 방안을 찾지 못했었다.

그러다가, 지인한테 코드의 문제점을 봐달라고 부탁했고 onChange부분을 다시 보라는 피드백을 받았다.

일단 큰 문제가 있었다.

"onChange를 두개로 나눠야된다는 것"

=> onChange함수를 하나로 받으니까 value가 dict형식에서 그냥 문자열 변수로 바뀐다는 이유였다.

나는 name과 content를 value로 묶어서 사용했기때문에 괜찮을 거라고 생각했지만, 오산이었던 것이다.

 

 

따라서, 아래의 코드처럼 onChange 함수를 두 개로 나눴다.

 

const onChangeName = useCallback(e => {
        setValue(e.target.value.name);,
    }, []);

    const onChangeContent = useCallback(e => {
        setValue(e.target.value.content);
    }, []);

 

지금보니 굉장히 창피한 코드이지만, 이렇게 고쳤었다. 이렇게 고치면 해결될거라고 기대에 부풀었었는데...나름대로 나눠서 작성했다는 사실에 뿌듯해하면서 다시 실행시켜봤지만, 또 오류였다. 왜!?!?!?!?라는 생각에 또 멘붕에 빠졌었다.

뭐가 문제였을까

 

이번에는 먼저 해결방법을 제시해주고 설명을 해야겠다. 

아래와 같은 코드를 고치면 문제가 해결된다.

 

const onChangeName = useCallback(
        (e) => {
            setValue({
                name: e.target.value,
                content: value.content,
            });
        },
        [value]
    );

    const onChangeContent = useCallback(
        (e) => {
            setValue({
                name: value.name,
                content: e.target.value,
            });
        },
        [value]
    );

 

여기서 e.target.value에 대한 공부가 필요하다고 느꼈다.

간단히 요약하자면, e.target으로 객체를 불러오는것이다. 따라서, 위의 코드를 빌려오자면 e.target.value이면 value의 값을 불러와주는 것이다.

setValue({name: e.target.value})이면 dict형식으로 나타낸 걸로 "키값 : 값"을 보여주는 것이다.

함수를 두개로 나누었다보니 함수에 따라 바꾸려는 변수가 다르기 때문에 함수와 매개변수를 각각 다르게 해주는 것이다.

 

const onChangeName = useCallback(
        (e) => {
            setValue({
            	...value,
                name: e.target.value,
            });
        },
        [value]
    );

    const onChangeContent = useCallback(
        (e) => {
            setValue({
                ...value
                content: e.target.value,
            });
        },
        [value]
    );

 

이렇게 코드를 바꿔줘도 똑같이 작동된다.

 

---

 

댓글 구현 완성!

너무 조급하게 다가가서 그런지 이렇게 하나의 작은 프로젝트를 스스로 해보니 개념이 많이 부족하다고 생각이 들었다.

다시 차근히 공부하면서 개념을 탄탄히 다져야겠다는 결심을 했다.

다음번에는 이 페이지에 좋아요 기능을 추가해서 포스트를 들고와야겠다😏

 

---

[전체코드] - input창 관련 코드만

완전 전체코드는 이 페이지의 모든기능이 구현되고 올리겠습니당

 

App.js

 

import React, { useState, useRef, useCallback } from 'react';
import './App.css';
import Template from './Template';
import CommentInput from './commentInput';
import Comment from './Comment';
import Article from './Article';


function App() {

  const [comments, setComments] = useState([
    { id: 1, name: 'Minjoo Park', content: 'I like it!', }
  ]);

  const nextId = useRef(1);

  const onInsert = useCallback(
    (name, content) => {
      const comment = {
        id: nextId.current,
        name,
        content
      };
      console.log(name);
      console.log(content);
      setComments(comments => comments.concat(comment));
      nextId.current += 1; //nextId 1씩 더하기
    },
    [comments],
  );


  return (
    <div>
      <Template>
        <Article />
        <CommentInput onInsert={onInsert} />
      </Template>
      <div style={{ marginBottom: "4rem" }}>
        {comments.map((comment) => {
          return (
            <Comment
              key={comment.id}
              id={comment.id}
              name={comment.name}
              content={comment.content}
            />
          )
        })}
      </div>
    </div>
  );
}

export default App;

 

commentInput.js

 

import React, { useCallback, useState } from 'react';
import { MdAdd } from 'react-icons/md';
import './CommentInput.css';

const CommentInput = ({ onInsert }) => {
    const [value, setValue] = useState({
        name: '',
        content: ''
    });

    const onChangeName = useCallback(
        (e) => {
            setValue({
                name: e.target.value,
                content: value.content,
            });
        },
        [value]
    );

    const onChangeContent = useCallback(
        (e) => {
            setValue({
                name: value.name,
                content: e.target.value,
            });
        },
        [value]
    );


    const onSubmit = useCallback(
        e => {
            onInsert(value.name, value.content);
            setValue({
                name: '',
                content: ''
            });

            e.preventDefault();
        },
        [onInsert, value],
    );

    return (
        <form className="CommentInsert" onSubmit={onSubmit}>
            <input classNames="inputNames"
                placeholder="이름"
                value={value.name}
                onChange={onChangeName}
            />
            <input placeholder="댓글"
                value={value.content}
                onChange={onChangeContent}
            />
            <button type="submit">
                <MdAdd />
            </button>
        </form>
    )
}

export default CommentInput;