[React] 6장. 컴포넌트 반복

• IterationSample.jsx

const IterationSample = () => {
  return (
    <ul>
      <li>눈사람</li>
      <li>얼음</li>
      <li>눈</li>
      <li>바람</li>
    </ul>
  );
};
 
export default IterationSample;

반복되고 있는 형태

<li>…</li>

코드가 좀 더 복잡하면 코드양도 늘어나고, 파일 용량도 쓸데없이 증가하게 된다. 이는 낭비이다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로 관리하기 힘들다.

반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보자!