[React, 클론코딩, 위스타그램] 댓글기능 리액트로 다시 구현하기

react에서 훅을 사용하여 새로운 값들을 어떠한 식으로 배열안에 저장을 하는지 그 값들을 하나하나 어떻게 화면에 구현하는지 살펴보자.

코드

다음은 컴포넌트 내부이다.

  const [commentsValue, setCommentsValue] = useState("");
  const [commentsArr, setCommentsArr] = useState([]);
  let comments = [...commentsArr];

위를 살펴보면 state를 두개를 선언했다. 위의 것은 input창에서 값이 바뀌면 바뀔 때마다 감지해서 값을 새로 저장해줄 값에 대한 state이고,

밑의 state는 위에서 받아온 값들을 form이 제출될 때 배열에 저장해줄 state이다.

모든 요소들은 객체로 저장해줄 것인데, 저장할 때 이전 배열과 합쳐주기 위해서 선언해주었다. 이 배열을 빈 배열로 두면 렌더링될 때마다 comments가 빈 배열로 초기화 되기때문에 comments=[...commentsArr]로 state에서 관리하고 있는 배열로 계속 갱신을 시켜준다.

  function onChange(event) {
    setCommentsValue(event.target.value);
  }

  function onSubmit(event) {
    event.preventDefault();
    comments = [...comments, {
      id: `${Date.now()}`,
      text: `${commentsValue}`,
      like: false,
    }];
    setCommentsArr(comments);
    setCommentsValue("");

위는 onChange함수와 onSubmit함수인데 이름에서 알 수 있듯 input창이 change될 때와 form이 제출 될 때 발생한다.

onChange는 간단하다. 값이 바뀌면 state를 set해서 값을 갱신시켜주는 역할을 한다.
onSubmit함수에서는 제출될 때 배열에 새로 저장을 한다.
comments에 원래 갖고있던 배열과 새로 제출된 값을 받아 객체로 저장해 줄 건데, 객체는 id값과 input창에 있는 값인 value값, like값을 갖는다.
id값은 나중에 삭제나 좋아요를 누를 때 해당 위치를 찾게 도와준다. value값은 텍스트로 화면에 표시해 줄것이고, like도 boolean값으로 나중에 좋아요에서 사용한다.

comments에 저장을 했으면 state를 set해서 배열에 저장할 거다. state로 관리되지 않으면, 렌더되면서 계속 배열이 초기화되는 현상이 일어난다.

마지막으로 input창의 value을 비워준다.

만들어진 배열을 토대로 return 이하에서 map메서드로 그려주면 화면에 잘 나타난다.

삭제기능도 생각보다 많이 어려웠는데 완성된 코드를 보니,,, 간단하다.

function clickDelete(event) {
    comments = comments.filter(item => item.id != event.target.id);
    setCommentsArr(comments);
  }

저 x버튼이 눌린다면 배열을 다시 저장하는데 filter함수를 활용해 줄거다.
아이템들의 id랑 target된놈의 id랑 같은 것 하나를 제외하고 나머지들을 반환하여 새로 comments배열에 저장한다.

새로 반환한 comments배열을 state에 set하여 저장한다.
그럼 없어진 요소를 제외한 나머지 것이 자동으로 렌더링되어 화면에 표시된다.