처음 만난 리액트 문서
10.3 기본적인 리스트 컴포넌트
이제 위에서 작성한 코드를 별도의 컴포넌트로 분리해보도록 하겠습니다. 아래 코드는 숫자 목록을 출력하는 NumberList컴포넌트 입니다.
function NumberList(props) {
const { numbers } = props;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);
NumberList컴포넌트는 props로 숫자가 들어있는 배열인 numbers를 받아서 이를 목록으로 출력합니다. 이 NumberList컴포넌트를 사용하면 numbers배열에 숫자가 수십개 또는 수백개가 되어도 별도의 코드를 작성할 필요없이 화면에 렌더링 할 수가 있습니다. 이 코드를 실행해보면 아래 그림과 같이 개발자 도구의 콘솔탭에 리스트 아이템에는 무조건 key가 있어야 한다는 경고문구가 나옵니다.
이 경고가 출력되는 이유는 지금은 각 아이템에 키가 없기 때문입니다. 이제 다음에서 이 키에 대해서 자세히 배워보도록 하겠습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page