#List(목록)

- Array(배열) : 자료형

#Key(열쇠)

- 각자 모두 고유하다
- 객체나 아이템을 구분하는 고유한 값
- 리액트에서는 아이템들을 구분하기 위한 고유한 문자열

# 반복되는 여러개의 Component 리스트로 렌더링 하기

# map()함수 : 매핑 시키기

const doubled = numbers.map((number) => number * 2);
// numbers 배열에 들어가있는 숫자들을 곱하기 2하여 대입하는 코드
// 이처럼 각 아이템에 어떻한 연산을 수행하여 최종결과를 배열로 만들어 리턴

---

# map()함수를 사용하여 렌더링

const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) =>
	<li>{number}</li> 
	// jsx에서는 {}를 하면 자바 스크립트 코드를 넣을 수 있다
 	// 각 숫자의 값이 태그안에 들어가게 된다        
);
// 렌더링 시키기                              
ReactDOM.render(
		<ul>{listItems}</ul>,	
		// ul태그로 감싸게 된다                              
		document.getElementById('root')
);

렌더링 되는 코드의 모습

ReactDOM.render(
  <ul>
    <li>{1}</li>
    <li>{2}</li>
    <li>{3}</li>
    <li>{4}</li>
    <li>{5}</li>
  </ul>, 
  document.getElementById('root')
);

결과 화면

#기본적인 List Component의 형태

function NumberList(props) {
  const { numbers } = props; // props로 숫자배열인 numbers로 받아서
 
  // 이를 목록으로 출력...
  const listItems = numbers.map((number) =>
	<li>{number}</li>
  );
                               
  return (
	<ul>{listItems}</ul>
  );
}

const numbers = [1,2,3,4,5]; // 숫자가 수십개, 수백개여도 NumberList 컴포넌트 하나로 처리 가능
// 원하는 결과화면은 잘 나온다
// but, 실행 후 개발자모드에서 콘솔탭을 보면 list가 key값이 없다고 오류를 출력한다
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

---