[React] 여러 개의 Component 렌더링 하기

 

✔ List

 : JavaScript 의 변수나 객체들을 하나의 변수로 묶어 놓은 것

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

 

✔ Key

: 각 객체나 아이템을 구분할 수 있는 고유한 값 / 아이템들을 구분하기 위한 고유한 문자열 

 

리액트에서의 Key 값은 같은 List 에 있는 Element 사이에서만 고유한 값이면 된다.

 

 

✔ List 와 Key 를 이용하여 여러 개의 Component 렌더링 하기

위 사진에서 A 라는 컴포넌트와 B 라는 컴포넌트가 반복되고 있는 것을 볼 수 있다. 이렇게 같은 컴포넌트를 화면에 반복적으로 나타내는 경우에 사용하는 것이 자바스크립트 함수 map() 이다.

 

• 자바스크립트에서의 map()

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

• 리액트에서의 map()

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

const listItems = numbers.map((number) =>
    <li>{number}</li>
);

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

JSX 에서는 중괄호를 사용하면 JavaScript 코드를 넣을 수 있기 때문에 {number} 이렇게 하면 각 숫자의 값이 태그 안에 들어가게 된다.

출력하면 이렇게 나온다.

 

 

• 기본적인 List Component 만들기

function NumberList(props) {
    const { numbers } = props;
    
    const listItems = numbers.map((numebr) =>
    	<li>{number}</li>
    );
    
    return (
    	<ul>{listItems}</ul>
    );
}

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

이 코드를 실행하면 

콘솔창에 위와 같은 경고가 뜬다. list 에는 key 값이 필요하다는 것이다.

 

map() 함수 안에 있는 Elements 는 꼭 key 가 필요하다.

 

 

• Key 로 값을 사용하는 경우 ( ❌ )

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

위와 같이 key 를 값으로 사용하는 경우는 numbers 배열에 중복된 값이 들어가면 key 값도 중복되기 때문에 고유해야 한다는 key 값의 조건이 충족되지 않는다.

 

• Key 로 id 를 사용하는 경우 ( ✔ )

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

위와 같은 경우는 id 자체가 고유한 값이기 때문에 key 값으로 사용하기 적합하다.

 

• Key 로 index 를 사용하는 경우 ( ✔ )

const todoItems = todos.map((todo, index) =>
    // 아이템들의 고유한 ID 가 없을 경우에만 사용해야 한다.
    <li key={index}>
        {todo.text}
    </li>
);

index 를 key 값으로 사용해도 되긴 하지만, 아이템들의 고유한 id 가 없을 경우에만 사용하는 것이 좋다.