[리액트를 다루는 기술] 6장 컴포넌트 반복

6장 컴포넌트 반복

1. 자바스크립트 배열의 map() 함수

자바스크립트 배열 객체의 내장 함수인 map 함수 사용 -> 반복되는 컴포넌트 렌더링 가능

map 함수) 파라미터로 전달된 함수를 사용 -> 배열 내 각 요소를 원하는 규칙에 따라 변환 -> 그 결과로 새로운 배열 생성

1) 문법

arr.map(callback, [thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수
  • currentValue: 현재 처리하고 있는 요소
  • index: 현재 처리하고 있는 요소의 index 값
  • array: 현재 처리하고 있는 원본 배열
• thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스

2) 예제

 

 

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

기존 배열로 컴포넌트로 구성된 배열 생성 가능

1) 컴포넌트 수정

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

export default IterationSample;

문자열로 구성된 배열 선언/ 배열 값 -> <li>...</li> JSX 코드로 된 배열을 새로 생성 -> nameList에 담음

map 함수) JSX 작성 시 DOM 요소 작성 OR 컴포넌트 사용

2) App 컴포넌트에서 예제 컴포넌트 렌더링

// App.js
import React, { Component } from 'react';
import IterationSample from './IterationSample';

class App extends Component {
	render() {
		return (
        	<IterationSample />
		);
    }
}

export default App;

3. key

• 컴포넌트 배열을 렌더링 -> 어떤 원소에 변동 있었는지 알아내려고 사용
• ex. 유동적인 데이터) 원소 새로 생성, 제거, 수정 가능 
  / key X -> Virtual DOM 비교 과정에서 리스트 순차적 비교하며 변화 감지

1) key 설정

map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props 설정하듯이 설정

key 값: 언제나 유일한 값 => 데이터가 가진 고유값을 key값으로 설정

// 예시: 게시판의 게시물 렌더링 -> 게시물 번호: key 값
const articleList = articles.map(article => (
	<Article
    	title={article.title}
        writer={article.writer}
        key={article.id}
   	/>
));

고유 번호 X -> map 함수에 전달되는 콜백 함수의 인수(index 값) 사용

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

export default IterationSample;

고유한 값이 없을 때만 index 값 -> key로 사용

index -> key로 사용 -> 배열이 변경될 때 효율적 리렌더링 X

4. 동적 배열을 렌더링

1) 초기 상태 설정

2) 데이터 추가 기능 구현

3) 데이터 제거 기능 구현

 

index 값 -> key로 사용 => 리렌더링 비효율적

 

유동적인 데이터 렌더링

초기 상태 설정 -> 데이터 추가 기능 구현 -> 데이터 제거 기능 구현

---

정리

반복되는 데이터를 렌더링 하는 방법 -> 응용 -> 유동적인 배열

key 값은 언제나 유일

ㄴ중복 -> 렌더링 과정에서 오류 발생

 

상태 안에서 배열 변형

배열에 직접 접근하여 수정 (X)

concat, filter 등의 배열 내장 함수 사용 -> 새로운 배열 -> 새로운 상태로 설정 (O)

---

출처

리액트를 다루는 기술 [개정판]