1. 여러 개의 컴포넌트 렌더링하기

---

• 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에 이를 코드상에 하나씩 직접 넣는 것은 같은 코드가 반복되기 때문에 매우 비효율적이다. 또한 동적으로 화면의 내용이 바뀌는 경우 코드를 직접 하나씩 넣는 방식으로는 구현하기가 힘들다. 이러한 경우 배열의 map() 함수를 사용한다.

const students = [
  {
    id: 1,
    name: 'Inje',
  },
  {
    id: 2,
    name: 'Steve',
  },
  {
    id: 3,
    name: 'Bill',
  },
  {
    id: 4,
    name: 'Jeff',
  },
];

function Attendance() {
  return (
    <ul>
      {students.map((value) => {
        <li key={students.id}>{value.name}</li>
      })}
    </ul>
  );
}

• map으로 불러올 컴포넌트가 자식 컴포넌트일 경우.

// 부모 컴포넌트
<ul>
    {question.map((value) =>
        <Discussion key={value.id} list={value} />
    )}
</ul>

// 자식 컴포넌트
function Discussion({ list }) {

    return (
        <li>
            <div className="discussion__answered">{list.answer !== null ? <i className="far fa-square-check"></i> : <i className="fa-regular fa-square"></i>}</div>
            <div className="discussion__avatar--wrapper">
                <img className="discussion__avatar--image" src={list.avatarUrl} />
            </div>
            <div className="discussion__content">
                <h2 className="discussion__title"><a className='link' href={list.url}>{list.title}</a></h2>
                <div className="discussion__information">{list.author + `/` + new Date(list.createdAt).toLocaleString()}</div>
            </div>
        </li>
    );
}

export default Discussion;