보통 배열이 있고, 그 배열에 있는 값들을 출력해보고 싶다고 가정했을 경우 for문을 많이 떠올리게 되는데,
Map함수를 사용하면 이러한 for문을 대신하여 깔끔한 코드로 작성할 수 있다.

연습을 위해서 우선 상단에 배열을 하나 만든다.

그리고 우선 for문을 이용해서 한 번 확인해보았다.

이렇게 i의 값을 확인해보면,

이렇게 배열 안의 값들을 확인해볼 수 있다.


이제 map함수를 사용해보자.
배열명.map(변수 => 함수)
우선 위의 코드는 map함수의 기본 생김새이다.

map함수의 기본 생김새를 생각하며 내 코드에 적용해보자.

arr.map((num) => console.log(num));

나는 배열 안의 값들이 숫자라 변수명을 임의로 num이라고 작성하였다. 이렇게 num값을 console에 찍어보면,

장황하게 for문을 사용할 필요 없이 배열의 값들을 잘 불러와준다.

이제 그럼 JSX 문법 안쪽에 map함수를 사용하여 출력을 해보도록 하자.

눈에 띄는 변화를 확인하기 위하여 arr배열에 값을 좀 더 추가하였다.

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

그리고, map함수를 이용하여 숫자가 들어가기 위한 li태그를 아래와 같이 넣어주었다.

그러면 아래의 이미지처럼 배열의 수에 맞게 li태그가 생성된 모습을 볼 수 있다.

이제 숫자 출력을 위해서 <li>숫자: {num}</li>이라고 작성해 넣어주면,

이렇게 배열의 값이 잘 들어가있는데,
이 때 console창을 확인해보면 오류가 하나 떠있을 것이다.

이런 오류가 떠있을 텐데, map함수를 사용할 때에는 반드시 key값을 지정해줘야하기 때문에 발생한 오류이다.

이 오류는 key값만 넣어주면 되기 때문에 간단하게 해결할 수 있다.
key값을 지정할 때에는 map함수의 제일 처음 시작하는 요소에 아래 이미지처럼 key값을 넣어주면 된다.
단, key값은 고유값으로 유니크해야하기 때문에 반복되는 이름이 되면 안된다.

우선, map함수에서 사용할 수 있는 배열 내 값의 index를 사용할 수 있기 때문에 index로 key값을 잡은 예시이다.

이렇게 작성할 경우,

위 이미지처럼 key값이 잘 적용되어 오류를 해결할 수 있고

현재 작성되어 있는 코드의 배열을 살펴보면 arr 배열의 값이 들어있는 num이라는 변수에 값이

이처럼 중복되는 값이 없어 각 값들이 유효하기 때문에 굳이 index를 사용하지 않아도 괜찮다.
결국 그냥 간단하게

이렇게만 작성해줘도 값은 오류없이 잘 출력된다는 것이다.

map함수 사용 규칙

1. map함수를 사용할 때 반드시 key값을 넣어줘야 함.

2. key값은 유니크(고유값)으로 처리할 것.