[React] 컴포넌트 반복

 

Map() 함수

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다.

map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 그 결과로 새로운 배열을 생성합니다.

 

arr.map(callback, [thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터 3가지 입니다.

  - currentValue: 현재 처리하고 있는 요소

  - index: 현재 처리하고 있는 요소의 index 값

  - array: 현재 처리하고 있는 원본 배열

• thisArg(선택사항): callback함수 내부에서 사용할 this 레퍼런스

map 함수: 기존 배열로 새로운 배열을 만드는 역할

let number = [1, 2, 3, 4, 5];
let processed = number.map(function(num) {
	return num * num
})

console.log(processed); // 1, 4, 9, 16, 25

// ES6
const number = [1, 2, 3, 4, 5]
const result = number.map(num => num * num)

console.log(result); // 1, 4, 9, 16, 25

 

데이터 배열을 컴포넌트 배열로 변환하기

const IterationSample = () => {
	const names = ['HTML5', 'CSS3', 'ES6', 'JavaScript']
    const nameList = names.map(name => <li>{name}</li>)
    
    return <ul>{nameList}</ul>
}

문자열로 구성된 배열을 선언합니다.

고유한 key값을 가져와야된다고 error가 발생합니다.

Each child in a list should have a unique "key" prop

key

컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지,

유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다.

 

key가 없을 때, virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다.

key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.

 

key가 있을 때, 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.

 

key 설정

const IterationSample = () => {
	<article
    	title={article.title}
        writer={article.writer}
        key={article.id} 
	/>
}

 

const IterationSample = () => {
	const names = ['눈사람', '얼음', '눈', '바람']
	const nameList = names.map((name, index) => <li key={index}>{name}</li>)

	return <ul>{nameList}</ul>
}

고유한 값이 없을 때만 index값을 key로 사용합니다. 배열이 변경될 때 효율적으로 렌더링하지 못합니다.

 

배열에 새 항목을 추가할 때 배열의 push함수를 사용하지 않고, concat을 사용했습니다.

! push와 concat의 차이점

push 함수는 기존 배열 자체를 변경해줍니다.
concat은 새로운 배열을 만들어 줍니다.

 

데이터 제거 기능 구현하기

 

항목을 더블 클릭 했을 때 해당 항목이 화면에서 사라지는 기능 구현합니다.

불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용합니다.

 

filter 함수

const numbers = [1, 2, 3, 4, 5]
const result = numbers.filter(number => number > 3);

console.log(result); // [4, 5]

 

filter함수의 인자에 분류하고 싶은 조건을 반환하는 함수를 넣어 주면 쉽게 분류할 수 있습니다.

filter함수를 응용하여 특정 배열에서 특정 원소만 제외시킬 수 있습니다.

 

const numbers = [1, 2, 3, 4, 5]
const result = numbers.filter(number => number !== 3);

console.log(result); // [1, 2, 4, 5] // 3이 빠졌습니다.

 

onDoubleClick: HTML요소를 더블클릭할 때 사용하는 이벤트