List Rendering

리스트 렌더링

• JSX 내부(return)에서 반복적으로 렌더링 하는 요소에 대하여 반복 처리하는 방법
• JSX 내부(return)에서는 for, while 같은 반복 구문을 사용할 수 없다.
• 리스트의 각 종 메서드 활용

리스트를 map에 담아서 전체 출력

import React from 'react'

export default function ListRender() {

	const fruits = ['apple', 'banana','cacao'];
	const listItems = fruits.map((item, index) => {
		return(
			<h3>{item}</h3>
		)
	}); 
	// value: listItems = [<h3>apple</h3>, <h3>banana</h3>, <h3>cacao</h3>]
	return (
		<div>
			{listItems}
		</div>
	)
}

축약 코드

const listItems = fruits.map((item, index) => {
	return(
		<h3>{item}</h3>
	)
});

//map 한줄 코드 조건에 따른 정리
const listItems = fruits.map((item, index) => <h3>{item}</h3>);

• 위 해당 구문 중 map을 이용하였는데 키값을 전달 하지 않으면 waring 발생
  - 해결 하기 위해서는 유니크한 값을 전달 key={ value }
  - const listItems = fruits.map((item, index) => <h3 key={index}>{item}</h3>);

1. 특정 횟수만큼 반복 렌더링 (Map)

(Key O) -> Map 사용

import React from 'react'

export default function ListRender() {

	const counts:number[] = [];

	for(let count = 0 ; count < 10; count++){
		counts.push(count);
	}
	
	return (
		<div>
			{counts.map(item => <h5 key={item}>반복작업</h5>)}
		</div>
		)
	}

2. 특정 횟수만큼 반복 렌더링 (Array)

(Key X) -> Array 사용

const counts2 = new Array(10).fill(0);

3. 특정 조건에 따라 반복 렌더링 방법

import React from 'react'

export default function ListRender() {

	const employees = [
		{name: '홍길동', department: '재무'},
		{name: '이영희', department: '영업'},
		{name: '김철수', department: '재무'},
		{name: '이성계', department: '개발'}
	];
	
	const fiEmployees = employees.filter(item => item.department === '재무');
	return (
		<div>
		{fiEmployees.map((item,index) => <h5 key={index}>{`이름: ${item.name} 부서: ${item.department}`}</h5>)}
		</div>
	)
}

employees.filter(item => item.department === '재무');을 통해 조건을 지정 map를 통해 불러온다