컴포넌트 반복: map()

1. 개요

React에서 컴포넌트로 구성을 나누는 이유 중 하나는 '코드 재사용'이다. 틀(컴포넌트)을 만들어 놓고 내용물(객체)만 바꿀 수 있다면 그 틀의 활용도는 매우 높아진다. 여기서 필요한 method가 Array.map()이다.

2. 사용 방법

① 컴포넌트에 들어갈 객체는 배열 형태이다.
② map() method를 이용해 컴포넌트를 반복시킨다.
③ 컴포넌트는 배열 각각의 값을 가진다.
④ 자식 컴포넌트에서는 이를 this.props를 통해 전달 받는다.

constructor() {
    super();
    this.state = {
        commentList: [
            {id: 0, comment: "hi"},
            {id: 0, comment: "bye"}
        ]
    }
}

//return() 내에서
{commentList.map(comment => (
    <FeedCommentLine
        key={comment.id}
        id={comment.id}
        comment={comment.comment}
    />
))}

3. key

위 예시 코드를 보면 컴포넌트 props로 'key'가 존재한다. 이것은 컴포넌트에서만이 아니라 list처럼 똑같이 반복되는 요소라면 식별자로서 무조건 갖고 있어야 하는 고유 값이라 할 수 있다.

존재하지 않거나 값이 중복되면 에러가 발생하니 주의해야 한다.

(1) DB의 id 값으로 지정

가장 안정적인 방법이다. 왠만해선 값이 겹칠 이유가 없으니 편하게 사용할 수 있다.

(2) 카운트 변수 사용

key 값을 위해 임의의 변수를 하나 선언하고 +1씩 해준다. 사용할 id 값이 없다면 그 다음으로 많이 사용하는 방법.

(3) index 사용

map()에서 임의로 제공해주는 index 값. 사용하기에는 가장 간단하나 가장 비추천하는 방법이다. 사용할 값이 없다면 최후의 방법으로 사용.

{searchList.map((item, idx) => (
    <SearchBoxItem key={idx} item={item} />
))}