[React] Rendering lists [두원공과대학교 인공지능과 김동일교수] 25.4

리액트에서 리스트 렌더링의 중요성

리액트에서는 데이터를 효율적으로 렌더링하기 위해 리스트 렌더링 기능을 제공합니다. 리스트 렌더링이란, 배열 형태의 데이터를 받아서 이를 화면에 나열하는 기능을 말해요. 예를 들어, 쇼핑 리스트를 구성할 때 각 항목을 배열로 관리하고, 이를 화면에 출력하는 것이죠.

리스트 렌더링의 가장 큰 장점은 코드의 재사용성과 유지보수성을 높여준다는 점이에요. 예를 들어, 만약 수백 개의 아이템을 일일이 작성한다면, 이는 매우 비효율적이겠죠. 하지만, 배열을 사용해 반복문을 통해 렌더링하면 훨씬 간편해져요. 특히 리스트의 각 항목에 고유한 키를 부여함으로써, 리액트는 변경 사항을 효율적으로 관리할 수 있답니다.

리스트 렌더링을 사용할 때는 반드시 각 요소에 "key" 속성을 부여해야 해요. 이 키는 리액트가 어떤 항목이 변경되었는지, 추가되었는지, 삭제되었는지를 식별하는 데 중요한 역할을 해요. 그래서 리스트를 렌더링할 때는 항상 이 점을 유의해야 해요.

데이터베이스와 리스트 연동하기

리액트에서 리스트 렌더링을 구현하기 위해서는 데이터베이스와의 연동이 필수적이에요. 예를 들어, 쇼핑 리스트를 만들 때, 데이터베이스에서 아이템 정보를 가져와서 이를 리스트로 렌더링하는 과정을 살펴볼게요.

먼저, 데이터베이스에 저장된 아이템들을 배열 형태로 불러오는 것이 중요해요. 이때, 각 아이템은 타이틀과 아이디와 같은 속성을 가질 수 있죠. 예를 들어, "캐비지", "가릭", "애플"과 같은 아이템을 포함하는 배열을 생각해보세요. 이렇게 배열을 구성하면, 이를 리스트로 간편하게 렌더링할 수 있어요.

리스트를 렌더링할 때는 조건부 스타일링을 적용할 수 있어요. 예를 들어, 특정 조건에 따라 색상을 변경하고 싶다면, 이 조건을 통해 클래스명을 다르게 설정할 수 있죠. 이렇게 하면 사용자에게 더욱 직관적인 UI를 제공할 수 있어요.

데이터베이스와의 연동을 위해서는 REST API를 활용하거나, GraphQL과 같은 쿼리 언어를 사용할 수 있어요. 이를 통해 백엔드에서 데이터를 쉽게 가져올 수 있답니다.

실전 예제: 쇼핑 리스트 구현하기

이제 실제로 쇼핑 리스트를 구현해볼 거예요. 먼저, 리액트 프로젝트를 생성하고, 타입스크립트를 사용하여 코드를 작성해볼게요. create-react-app을 사용하면 손쉽게 프로젝트를 시작할 수 있어요.

프로젝트를 생성한 후, 쇼핑리스트.tsx라는 파일을 만들고, 다음과 같이 기본 구조를 세팅해보세요.

```tsx import React from 'react';

const ShoppingList = () => { const items = [ { id: 1, title: '캐비지', isFruit: false }, { id: 2, title: '가릭', isFruit: false }, { id: 3, title: '애플', isFruit: true }, ];

return (
    <ul>
        {items.map(item => (
            <li key={item.id} style={{ color: item.isFruit ? 'red' : 'darkgreen' }}>
                {item.title}
            </li>
        ))}
    </ul>
);

};

export default ShoppingList; ```

이 코드에서는 items 배열을 정의하고, 각 아이템의 id를 키로 사용하여 리스트를 렌더링하고 있어요. 각 아이템의 isFruit 속성에 따라 글자 색상을 다르게 설정했죠.

이제 터미널에서 npm start 명령어를 실행하면, 브라우저에서 쇼핑 리스트를 확인할 수 있어요. 이렇게 리액트의 리스트 렌더링 기능을 활용하면, 복잡한 데이터도 간편하게 시각화할 수 있답니다.