리스트와 키

map() 사용법

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

• numbers배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성하는 코드
• map함수는 배열의 첫번째 아이템부터 순서대로 각 아이템에 연산을 수행한 뒤 그 결과를 배열로 만들어서 return한다.

리액트에서 map()사용

• 리액트에서 맵함수를 사용하여 엘리먼트를 렌더링하는 코드

• 최종적으로 렌더링 되는 코드

• 렌더링 결과

기본적인 List Component

• 숫자 목록을 출력

Key

• 아이템들을 구분하기 위한 고유한 문자열
• 리액트에서 키 값은 같은 list에 있는 elements사이에서만 고유한 값이면 된다
• map() 함수 안에 있는 elements는 꼭 key가 필요하다
  
  
• map()에서 두 번째 파라미터로 제공해주는 인덱스 값을 키 값으로 사용
• index : 배열 내에서 현재 아이템의 인덱스를 의미
• 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 인덱스 사용X
• 리액트에서 키를 명시적으로 넣어주지 않으면 인덱스 값을 키값으로 사용