처음 만난 리액트(React) : section 10. List and Keys

💡 List와 Keys

List

목록

같은 아이템을 순서대로 모아둔 것

Array [배열]

• JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것
  • 배열을 사용해서 List 형태로 Element들을 렌더링

const numbers = [1, 2, 3, 4, 5];

Key

열쇠

각 객체나 아이템을 구분할 수 있는 고유한 값

아이템들을 구분하기 위한 고유한 문자열

💡 여러 개의 Component 렌더링 하기

반복되는 다수의 Element가 렌더링

map()

JavaScript 배열

배열에 들어있는 각 변수에 어떤 처리하고 return

const doubled = numbers.map((number) => number * 2);

// 배열의 첫 번째 아이템부터 순서대로 각 연산을 실행하여 최종 결과를 배열 return

React에서 map함수를 이용해 Element 렌더링

// numbers 배열
// map함수를 사용해 이 배열에 들어있는 각 숫자를 li태그를 감싸 return
// 중괄호를 사용해서 JavaScript 넣을 수 있음

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li>{number}</li>
);
// 총 5개의 Element를 갖게 됨

// Rendering하기 위해 render함수 사용
// li태그에 있는 listItems 배열을 ul태그로 감싸 Rendering
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

최종적으로 렌더링

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

/* 결과
 ● 1
 ● 2
 ● 3 
 ● 4
 ● 5 */

기본적인 List Component

숫자 목록 출력

// NumberList Component
// Props으로 숫자가 들어있는 배열인 numbers을 받아서 목록으로 출력
/* NumberList Component를 사용하면 numbers 배열에 숫자가 수십개 수백개되어도
별도의 코드를 작성할 필요 없이 렌더링 */
function NumberList(props) {
  const { numbers } = props;
  
  const listItems = numbers.map((number) => 
      <li>{number}</li>
  );
  
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  	<NumberList numbers={numbers} />,
	document.getElementById('root')
);

/* console창에 경고 문구가 나오는데
리스트 각 아이템을 고유한 키를 갖고 있어야 함
각 아이템에 키가 없기 때문 */

💡 List의 Key

React Key

Key의 값은 같은 List에 있는 Elements 사이에서만 고유한 값이면 됨

• EX) 두 대학교 사이에서 학번이 같아도 상관없음
  • 두 List 사이에서는 Key가 같아도 상관없음

Key로 값을 사용하는 경우

// Key 값으로 숫자의 값을 사용한 것
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li key={number.toString()}>
  		{number}
	</li>
);
// numbers 배열의 숫자들이 중복되지 않는 경우에ㅐ 정상적으로 작동
// 중복된 숫자가 있으면 Key 값도 중복되기 때문에 고유해야하는 Key 값이 충족되지 않음
// console창에 Key 값이 중복된다고 경고 문자가 출력

Key로 id를 사용하는 경우

// id의미 자체가 고유한 값 → Key 값
const todoItems = todos.map((todo) =>
    <li key={todo.id}>
  		{todo.text}
	</li>
);

Key로 index를 사용하는 경우

// map함수에서 두 번째 파라미터로 제공해주는 index을 값을 Key값으로 사용 
// index는 배열 내에서 현재 Item에 index를 의미
const todoItems = todos.map((todo, index) =>
	// 아이템들의 고유한 ID가 없을 경우에만 사용
	<li key={index}>
  		{todo.text}
	</li>
);
// 배열에 Item 순서가 바뀔수 있는 경우에는 Key값을 index로 사용하는 것을 권장하지 않음   // 성능에 부정적인 영향, Component State와 관련하여 문제를 일으킬 수 있음

❕ Key를 명시적으로 넣어주지 않으면 기본적으로 index값을 Key값으로 사용

❕ map() 함수 안에 있는 Elements는 꼭 key가 필요