List

---

List 는 같은 아이템을 순서대로 모아 놓은 것을 말합니다. List 를 위해 사용하는 자료 구조가 배열 입니다. 배열 은 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것을 말합니다.

Key

---

Key 는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미합니다.

React에서 Key 는 아이템을 구분하기 위한 고유한 문자열을 말합니다. Key값은 같은 List에 있는 엘리먼트 사이에서만 고유한 값이면 됩니다.

출처

Key값으로는 id가 가장 적합하고, 아이템들의 고유한 id가 없을 경우 index를 사용합니다. 참고로 리액트에서는 Key값을 명시적으로 넣어주지 않으면 기본적으로 index를 사용합니다.

여러 개의 Component 렌더링하기

---

리액트에서는 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링할 수 있습니다.

map()

배열에 들어있는 첫번째 아이템부터 순서대로 어떠한 처리(연산)를 수행한 뒤, 최종 결과를 배열로 만들어 리턴합니다.

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

map 사용예시 #1

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li>{number}</li>
);

ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('root')
);

JSX에서는 중괄호를 사용하면 자바스크립트 코드를 넣을 수 있다.

위 코드를 기본적인 형태를 가진 별도의 List 컴포넌트인 NumberList 컴포넌트로 분리할 수 있습니다.

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')
);

map 함수 안에 있는 엘리먼트에는 꼭 key가 필요합니다.