10장 리스트와 키Permalink

리스트와 키란 무엇인가?Permalink

리스트는 같은 아이템을 순서대로 모아 놓은것이다.

리스트를 위해 사용하는 자료구조가 배로 배열이다. 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어 놓은 것이다.

const number = [1, 2, 3, 4, 5, 6];

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

리스트와 키가 있으면 반복되는 다수의 엘리먼트를 쉽게 렌더링 할 수 있다.

여러 개의 컴포넌트 렌더링하기Permalink

에어비엔비의 첫 화면을 살펴보면 A와 B가 반복적으로 나온다.

이렇게 컴포넌트를 화면에 반복적으로 나타내야할 경우에 이를 코드상에 하나씩 집어 넣는 것은 비효율적이다.

또한 동적으로 화면의 내용이 바뀐다면 코드를 직접 하나씩 넣는 방식으로는 구현하기 까다롭다.

이런경우 사용하는 것이 자바스크립트 배열의 map()함수이다. 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것이다.

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

위 코드는 numbers에 있는 각 숫자에 2르 곱한 값이 들어간 doubled이라는 배열을 생성하는 코드이다.

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

jsx에서는 중괄호를 사용해서 자바스크립트 코드를 넣을 수 있기 때문에, 각 숫자의 값이 태그 안에 들어가게 된다.

이렇게 리턴된 ListItems 배여은 총 5개의 엘리먼트를 갖고 있게된다.

이것을 화면에 렌더링하기 위해서 아래와 같이 코드를 작성해 준다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{ListItems}</ul>);

기본적인 리스트 컴포넌트Permalink

아래의 코드는 숫자 목록을 출력하는 NumberList컴포넌트이다.

NumberList 컴포넌트는 props로 숫자가 들어 있는 배열인 numbers를 받아서 이를 목록으로 출력한다.

이 NumberList 컴포넌트를 사용하면 numbers 배열에 숫자가 수십개 또는 수백개가 되어도 별도의 코드를 작성할 필요 없이 화면에 렌더링할 수 있다.

그러나 콘솔에 들어가보면 리스트는 무조건 키가 있어야한다는 경고 문구가 나온다.

리스트의 키에 대해 알아보기Permalink

리액트에서의 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유 한 값이면 된다.

서로 다른 두 리스트에서 키 값이 같아도 상관없다는 뜻이다. 각 리스트 내에서 아이템을 구분하기 위한 용도이기 때문에 속한 리스트내에서만 고유한 값이면 된다.