React에서 컴포넌트를 재사용할 때, Array.map() 메소드를 활용하여 여러 컴포넌트를 생성한다. 우선 간단하게 Array.map() 메소드를 설명하면 아래와 같다.
Array.map()
배열 내의 모든 요소 각각에 대하여,
괄호 안에 작성된 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
배열과 같이 순서가 정해져 있는 대상에, 동일한 행동을 반복하게 하여, 새로운 배열로 반환해야할 때 사용된다.
_
ex) const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.map(x => x*2);
console.log(arr2) // [2, 4, 6, 8, 10]
아래는 React를 사용한 westagram 클로닝 프로젝트 중, Array.map() 메소드를 활용하여 SNS 피드 내 comment를 다수 제작한 예시이다.
class Feed extends Component {
constructor() {
super();
this.state = {
commentList: [],
newComment: '',
};
}
render() {
return (
<ul className="feedComment">
<Comment commentList={this.state.comment} />
</ul>
)}
}
댓글 작성란(input)에서 새롭게 작성된 댓글은 부모 컴포넌트인 Feed 컴포넌트의 State값 중 newComment에 string 형태로 저장되고, 게시 버튼을 누르면 배열 commentList에 값이 추가된다. 그렇게 저장된 값은 자식 컴포넌트인 Comment 컴포넌트에
commentList={this.state.comment}의 형태로 props를 통해 전달된다.
class Comment extends Component {
render() {
return this.props.commentList.map(comment => {
return (
<li key={comment.id}>
<b>{comment.userName}</b>
<span> {comment.text}</span>
<button className="deleteBtn">x</button>
</li>
);
});
}
}전달된 데이터는 this.props.commentList를 통해 자식 컴포넌트에서 받아 사용이 가능하다. 단, 위의 예시와 같이 엘리먼트 리스트를 Array.map() 메소드를 활용하여 만드는 경우 각 항목에 엘리먼트의 key값을 부여해야한다는 경고문이 뜨게 된다.
key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이며, 개발자나 사용자에게는 큰 의미가 없지만 React가 각각의 엘리먼트를 식별할 수 있도록 돕는 역할을 한다. 만약 어떤 항목을 변경하거나 추가, 혹은 삭제해야 할 때, React는 각 엘리먼트에 부여된 key값을 통해 특정 엘리먼트를 식별하게 되는 것이다.
