react에서 map함수는 매우 중요합니다!
왜 중요할까?
react는 많은 장점을 가지고 있지만, 그중 가장 뛰어난 장점은 '재사용성'이다. UI가 비슷하거나 동일한 리스트들이 반복 되는 것들을 react에서는 component화하여 필요할 때마다 재사용할 수 있다.
그리고 이때 map함수가 중요한 역할을 한다!
어디서 쓰는가?
반복되는 이미지들의 리스트, 상품의 나열 등에서 주로 사용이 된다.
왜죠..?
map함수는 배열로된 요소를 하나씩 돌면서 원하는 값으로 반환해준다. map함수를 쓴다면 이렇게 기억하면 쉽다!
반복 되는 이미지나 리스트 = 배열의 요소들 []
그 이미지를 원하는 모양이나 형태, 태그들로 반환 = map함수에서 원하는 값으로 반환한다.
즉, 반복되는 이미지나 리스트들을 하나의 요소로 하여, map를 사용해 각각의 요소를 li태그로 감싸서 반환한다면 손쉽게 리스트를 만들 수 있다.
그래서 어떻게 사용합니까!
위의 처럼 코드를 사용할 수 있는데, 위와 같이 사용하면 결과는 다음과 같이 나온다.
사람1
사람2
사람3
사람4
의 리스트 구조의 결과를 얻을 수 있다.
기억하자!! 리액트의 map은 javascript 때처럼 호락호락 하지 않아!!
🔴 리액트에서는 각각의 리스트에 꼭 키 값을 넣어주어야 한다.
아니... key값은 또 뭔가요..?
key는 각각의 리스트에게 부여하는 고유한 값이다. 쉽게 말해서, 각 리스트들이 갖는 일종의 신분증이다. key가 필요한 이유는 각 리스트들을 구별하기 위해서이다.
예..? 구별은 왜 하는데요...?
리액트가 똑똑해서이다!
리액트는 state가 바뀌었을 때 전부를 리렌더링 하지 않는다. '바뀐 부분에 한해서만' 리렌더링을 한다.
중요한 포인트이다!
바뀐 부분에 대해서만 리렌더링을 진행하는 리액트의 특성 때문에, 리스트 개별에 각각 고유의 키 값을 부여하여 서로를 구별하는 것이다.
키 값에 부여 되면 리스트가 달라 졌을 때, 리액트는 달라진 부분만 고려하여 리렌더링을 진행할 수 있다.
그럼 키 값은 어떻게 부여하나요...?
이 다음에 알아보자!(블로그가 너무 길어져서...)
