[JavaScript] 배열

 

게시판 같은 목록들은 어떻게 구현될까?

예제

배열[1,2,3,4,5] 의 각 요소를 제곱해서 새로운 배열 생성하기

var 숫자들 = [1, 2, 3, 4, 5];
var 요소를제곱하기 = 숫자들.map(function(num){
	return num * num;
});
console.log(요소를제곱하기);
// 결과
// [1, 4, 9, 16, 25]

 

위의 내용을 ES6 문법으로 작성해보기

const 숫자들 = [1, 2, 3, 4, 5];
const 요소를제곱하기 = 숫자들.map(num => num * num);
console.log(요소를제곱하기);
// 결과
// [1, 4, 9, 16, 25]

 

---

 

배열 컴포넌트를 위한 map() 함수 사용법

const 먹어야하는과일목록 = [
  { 과일이름: '사과', 먹었나: false },
  { 과일이름: '바나나', 먹었나: true }
];

const 여러과일들 = 먹어야하는과일목록.map(먹어야하는과일 => <div>{먹어야하는과일.과일이름}</div>);
// 결과
// [<div>사과</div>, <div>바나나</div>]

 

 

컴포넌트 형태의 JSX로 변경

컴포넌트 형태의 JSX로 변경할 수도 있다.

'먹어야할과일목록'에 저장된 객체를 JSX로 변경하면 다음과 같다.

const 먹어야하는과일목록 = [
  { 과일이름: '사과', 먹었나: false },
  { 과일이름: '바나나', 먹었나: true }
];

const 여러과일들 = 먹어야하는과일목록.map(먹어야하는과일 => <과일정보/>);
// 결과
// [<과일정보/>, <과일정보/>]

 

 

배열 데이터를 컴포넌트의 프로퍼티에 전달하기

const 먹어야하는과일목록 = [
  { 과일이름: '사과', 먹었나: false },
  { 과일이름: '바나나', 먹었나: true }
];

const 여러과일들 = 먹어야하는과일목록.map(먹어야하는과일 => <과일정보 과일이름={먹어야하는과일.과일이름}/>);
// 결과
// [<과일정보 과일이름="사과" />, <과일정보 과일이름="바나나" />]

 

---

 

컴포넌트로 구성된 배열 생성하기

import React from 'react';

const Sample = () => {
    const 과일들 = [사과, 바나나, 파인애플, 딸기];
    const 과일목록 = 과일들.map(이름 => <li>{이름}</li>);
	return <ul>{과일목록}</ul>;
};

export default Sample;
// 결과
// <ul>
// 	<li>사과</li>
// 	<li>바나나</li>
// 	<li>파일애플</li>
// 	<li>딸기</li>
// </ul>

 

하지만 이렇게만 하면 "key" prop가 없다는 경고 메시지가 나온다.

그럴때는 key 를 넣어줘야한다.

배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 쓰는 것이다.