<React> list of Component

이번 시간에는 component list를 처리하는 방법을 배우겠습니다. list를 처리할 수 있는 하드 코딩 방식과 map을 이용하는 방식 두 가지를 살펴보겠습니다.

하드 코딩

그냥 우리가 html 문서를 작성하듯이 ul안에 li 4개를 넣어줬습니다.

function App(){
  return (
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  );
}

map을 이용한 방식

알고계시겠지만 map은 array를 return하는 메소드입니다. jsx에서는 array를 위의 하드코딩한 방식과 동일하게 처리해주기 때문에 매우 유용합니다. 지금은 간단하고 작은 사이즈의 배열을 처리해서 하드코딩방식과 차이가 크게 나지 않지만 복잡하고 큰 사이즈의 배열을 처리할수록 이 방식이 유리합니다.

또한 헷갈릴 수 있는 부분을 짚고 넘어가면 return <li>{item}</li>을 해주는데 중괄호를 사용하는 이유는 return 값이 결국은 jsx이기 때문에 중괄호를 사용하지 않으면 변수로 생각하지 않기 때문입니다.

한가지 팁이 있다면 es6에서 추가된 탬플릿 문자열로 return값이 감싸져 있다고 생각해도 됩니다. 그리고 중괄호는 ${}와 비슷하다고 생각하면 변수 처리하는 것이 덜 헷갈릴거라고 생각합니다. 그러니까 array부분을 만약에 jsx가 아니라고 하면 item 사이사이에 ,가 들어갔을 겁니다. ex) [1, 2, 3]

const arr = ["item1", "item2", "item3", "item4",];

function App(){
  return (
    <ul>
      {
        arr.map(item => {
          return <li>{item}</li>
        });
      }
    </ul>
  );
}