# 리스트 렌더링

데이터 타입이 리스트(일반적으로 Array 객체를 말함)인 경우, 반복(Loop) 처리를 통해 JSX 코드를 동적으로 생성 할 수 있습니다. 아래 예시는 Array 객체의 [map ](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)메서드를 사용해 배열을 순환 처리하여 React 요소를 만들어 낸 후, 컨테이너 역할의 React 요소의 자식 요소로 설정합니다.

```jsx
const reactFamily = [
  { id: 'go1qhwkay', name: 'React' },
  { id: 'jdkw8wjbk', name: 'Redux' },
  { id: 'ekjkfdcj4o', name: 'React Router' },
]

const reactFamilyJSX = (
  <ul className="react-family">
    {reactFamily.map(member => (
      <li className="react-family__member">{member.name}</li>
    ))}
  </ul>
)
```

{% hint style="warning" %}
\<ul> 요소의 자식은 반드시 \<li> 요소여야 함을 잊어서는 안됩니다!
{% endhint %}

{% hint style="danger" %}

#### 어라? 오류가 발생하는데요?

코드를 실행하면 리스트의 각 아이템에 고유 키(key)를 넣어야 한다는 오류가 브라우저 Console 패널에 출력됩니다. 반복되는 아이템의 고유 키로 특별한 문자 값을 가진 속성 key로 설정해야 합니다.&#x20;

```jsx
<li
  key={member.id}
  className="react-family__member"
>
  {member.name}
</li>
```

key는 React가 어떤 항목을 변경, 추가 혹은 삭제할지 식별하는 것을 돕습니다. (안정적으로 식별하기 위함)
{% endhint %}

### 조건에 따른 리스트 렌더링 <a href="#conditional-list-rendering" id="conditional-list-rendering"></a>

조건에 따라 리스트 렌더링을 수행하거나, 수행하지 않도록 프로그래밍 할 수 있습니다.

```jsx
const reactFamily = [
  { id: 'go1qhwkay', name: 'React' },
  { id: 'jdkw8wjbk', name: 'Redux' },
  { id: 'ekjkfdcj4o', name: 'React Router' },
]

const ReactFamilyJSX =
  // 조건 식
  reactFamily.length > 0 ? 
    (
      // 조건이 참인 경우
      <ul className="react-family">
        {reactFamily.map(member => (
          <li className="react-family__member">{member.name}</li>
        ))}
      </ul>
    ) : 
    (
      // 조건이 거짓인 경우
      <p>공부 할 React 패밀리가 없습니다.</p>
    )
```

함수를 사용해 코드를 묶어 재사용 할 수 있도록 할 수 있고, 함수에서는 '식' 대신 '문'을 사용해 결과 값을 반환하도록 구성할 수도 있습니다.

```jsx
function renderReactFamily(items) {
  // 조건 문
  if (items.length > 0) {
    return (
      <ul className="react-family">
        {items.map(item => (
          <li className="react-family__member">{item.name}</li>
        ))}
      </ul>
    )
  } else {
    return <p>공부 할 React 패밀리가 없습니다.</p>
  }
}


const ReactFamilyJSX = renderReactFamily(reactFamily)
```

{% hint style="warning" %}

#### Vue의 리스트 렌더링

Vue와 Angular는 템플릿 엔진을 사용하고, 디렉티브(Directives)를 사용해 [리스트 렌더링](https://v3.ko.vuejs.org/guide/introduction.html#%E1%84%8C%E1%85%A9%E1%84%80%E1%85%A5%E1%86%AB%E1%84%86%E1%85%AE%E1%86%AB%E1%84%80%E1%85%AA-%E1%84%87%E1%85%A1%E1%86%AB%E1%84%87%E1%85%A9%E1%86%A8%E1%84%86%E1%85%AE%E1%86%AB) 합니다.

{% code title="Vue의 리시트 렌더링(List Rendering)" %}

```markup
<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
```

{% endcode %}
{% endhint %}