[React] List를 이용해 반복 렌더링하기

Map()

: JS에서 배열에 내장되어있는 함수로 배열의 크기만큼 반복작업을 하기 위해 사용합니다.

//JSX
const numbers = [1, 2, 3];
const double = numbers.map( (num) => num * 2 );

• map()은 반복 연산된 값으로 이루어진 배열을 반환합니다.

---

component 반복 렌더링하기

1) props로 받은 값에 따라 반복하여 li를 반환하는 component입니다.

//JSX
function NumberList(props){
    const { numbers } = props;
    const list = numbers.map((num) =>
        <li>{num}</li>
    );
    return (
        <ul>{list}</ul>
    );
}

2) props로 배열을 전달하여 component를 생성합니다.

//JSX
~~
  	<NumberList numbers={1,2,3} />
~~

3) NumberList 컴포넌트가 변환된 모습입니다.

//JSX
~~
  	<ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    </ul>
~~

• 위와 같이 실행하면 개발자모드의 콘솔창에 ~~ "key" prop.이라는 경고 문구가 출력됩니다.
  map()을 실행할 때 각 element에 key값을 설정해주어야 합니다.

---

Key

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

//JSX
const { numbers } = props;
const list = numbers.map((num) =>
	<li key={num.toString()}>
		{num}
	</li>
);

• element의 key 속성값을 지정해줍니다.
• key는 고유한 값이어야 합니다. 위와 같은 코드는 num의 값이 중복될 경우가 있기 때문에 올바른 설정이 아닙니다.

1) id를 이용한 key 설정

//JSX
const { todos } = props;
const todoList = todos.map((todo) =>
	<li key={todo.id}>
		{todo.text}
	</li>
);

• 배열에 id값을 설정해준 경우 id의 의미 자체가 고유한 값이기 때문에 key로 사용하기 적절합니다.

2) index를 이용한 key 설정

//JSX
const { todos } = props;
const todoList = todos.map((todo, index) =>
	<li key={index}>
		{todo.text}
	</li>
);

• index는 고유한 값이기 때문에 key로 설정이 가능합니다.
• 배열의 아이템 순서가 변경될 수 있는 경우에는 index로 key를 설정하는것이 옳지 않습니다.
• React에서는 key값을 명시하지 않은 경우 index를 기본 key값으로 사용합니다.