배열을 목록으로

map은 배열의 각 항목을 엘리먼트로 바꾼다. 형제 엘리먼트에는 key가 필요하다. React가 어떤 항목이 바뀌었는지 구분하는 이름이다.

const posts = [
  { id: '1', title: '첫 글' },
  { id: '2', title: '둘째 글' }
]

export default function PostList() {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

key는 그 항목의 아이디처럼 안정된 값을 쓴다. 배열 순번 index는 순서가 바뀌거나 항목이 빠지면 다른 항목과 섞인다. 화면에 key는 나오지 않는다. props가 아니다.

있을 때만 그리기

&&는 왼쪽이 참일 때만 오른쪽을 그린다. 둘 중 하나를 고르면 삼항 연산자다.

export default function Status({ count, isOpen }) {
  return (
    <>
      {count > 0 && <p>{count}번 눌림</p>}
      {isOpen ? <p>열림</p> : <p>닫힘</p>}
    </>
  )
}

숫자 0은 거짓이 아니라 화면에 0이 찍힐 수 있다. “있다”를 길이로 검사할 때는 list.length > 0처럼 비교한다.