[React] map 함수를 이용하여 댓글 추가기능 구현하기

자바스크립트의 내장 함수인 map을 이용하여 동적인 배열을 렌더링 하기!
(예시를 위해 댓글 기능을 구현하겠슴미다)

1. map() 함수

(포스팅 보기 -> 배열 고차 함수 - (2) forEach / map / filter)
map함수는 자바스크립트의 배열 객체의 내장 함수이다. 파라미터로 전달된 요소를 받아 조건에 부합하는 요소를 담아낸 새로운 배열을 생성하는 것이 map함수의 특징이다.

const arr = [1, 2, 3, 4, 5];

console.log(arr.map(item => item * 2)); // [2, 4, 6, 8, 10]

이러한 특성을 이용하여 리액트에서는 컴포넌트로 구성된 배열을 생성할 수 있다.

2. 컴포넌트 배열 생성하기

1) map함수를 사용하기 위해서는 배열이 먼저 필요하다. useState를 이용하여 배열의 초기상태인 빈 배열을 담아준다.
2) map함수 안에 작성된 댓글이 추가될 jsx 코드를 작성해준다. (자세한건 아래의 코드를 봐주세요!)
3) 댓글이 작성되면 빈배열에 내용이 추가된다, map함수는 배열의 요소(여기서는 댓글 내용)들을 불러와 작성된 jsx코드에 넣어주면 화면에 댓글이 출력되는 것을 확인할 수 있다.

const [comments, setComments] = useState([]);

return (
  <>
  <ul className="message-list">
              {comments.map(elements => {
                return (
                  <>
                    <li className="message-list-box">
                      <div>
                        <span className="message-list-id">ex id</span>
                        <span className="message-list-content">{elements}</span>
                      </div>
                      <button className="message-list-delete-button">X</button>
                    </li>
                  </>
                );
              })}
    </>

3. 댓글 컴포넌트화 하기(feat.props로 데이터 전달)

1) 컴포넌트 파일을 추가해준다.
2) 부모 state에 저장된 댓글 데이터를 가지고와 자식 state에 jsx코드를 작성한다.
3) 댓글창 구현을 위한 필요한 데이터를(여기서는 elements) props로 받아온다.


⭕️ MainPage(부모state)

<ul className="message-list">
              {comments.map(elements => {
                return (
                  <>
                    <ComponentsNaeun />
                  </>
                );
              })}
            </ul>

⭕️ ComponentsPage(자식state)

import React, { useState } from 'react';
import { isCompositeComponent } from 'react-dom/test-utils';
import './MainArticle.scss';

function ComponentsPage(props) {
  return (
    <>
      <li className="message-list-box">
        <div>
          <span className="message-list-id">ex id</span>
          <span className="message-list-content">{props.elements}</span>
        </div>
        <button className="message-list-delete-button">X</button>
      </li>
    </>
  );
}
export default ComponentsPage;