리스트 렌더링

집합(배열) 데이터 순환

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

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>
)

<ul> 요소의 자식은 반드시 <li> 요소여야 함을 잊어서는 안됩니다!

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

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

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

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

조건에 따른 리스트 렌더링

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

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>
    )

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

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)

Vue의 리스트 렌더링

Vue와 Angular는 템플릿 엔진을 사용하고, 디렉티브(Directives)를 사용해 리스트 렌더링 합니다.

Vue의 리시트 렌더링(List Rendering)

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