map?
- 자바스크립트 배열 객체의 내장함수인
map함수를 사용하여반복되는 컴포넌트를 렌더링할 수 있다. - map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.
자바스크립트에서의 map() 함수
arr.map(callback, [thisArg])
- callback: 새로운 배열의 요소를 생성하는 함수
currentValue: 현재 처리하고있는 요소
index: 현재 처리하고 있는 요소의 index값
array: 현재 처리하고 있는 원본 배열 - thisArg(선택항목): callback 함수 내부에서 사용할 this래퍼런스
//array내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용
var array = [2,3,4];
// array의 각 요소에 x2를 하고 싶을 때
var newarray = array.map(function(a){
//a는 array안 하나하나의 데이터
return a * 10 //[20, 30, 40]
});JSX안에서 map으로 반복문 쓰기
① 원하는 자료에 map함수를 써서 그 자료의 갯수만큼 반복문을 돌릴 수 있다.
(아래 예시인경우 3번 반복된다.)
② 반복을 원하는 HTML을 return안에 적어준다.
- 콜백함수 안에
파라미터를 추가시 그 파라미터는array안의 데이터를 뜻한다.
아래 예시의 경우) a는 message의 내용들이된다.
{
반복할데이터.map(() => {
return <HTML>
})
}
function App(){
let [message, setMessage] = useState(['안녕하세요', '반갑습니다', '공부합시다']);
return(
<div>
...
{
message.map(function(a){
return(
<div>
반복하고싶은HTML적어주기
{ a }
// a는 '안녕하세요', '반갑습니다', '공부합시다'
</div>
)
});
}
...
</div>
);
}👩💻 참고1)
- JSX 안 에서 for반복문 사용 ❌
- JSX 안 에서 map()함수 사용 ⭕
👩💻 참고2) 일반 for반복문을 쓰고싶다면?
① 일반 함수 생성(ex> 반복된UI())
② 함수안에 HTML을 담을 array자료를 생성
③ 함수안에서 for반복문을 사용해 array내에 HTML을 추가한다.
④ 완성된 array를 return해준다.
⑤ 함수의 원하는 곳에 { 함수명() } 데이터바인딩을 해준다.
- 아래의 예시는 for반복문으로 div를 3개 만드는 예제
function App(){
function 반복된UI(){
var array = [];
for ( var i = 0; i < 3; i++) {
array.push(<div>hello</div>);
}
return array
}
return(
<div>
{ 반복된UI() }
</div>
)
}Key?
- 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소가 변경되었는지 빠르게 감지할 때 사용한다.
- 컴포넌트 모두를 다시 렌더링 하는 것이 아니라 특정 원소가 있는 곳에서만 새로 렌더링 할 수 있게 된다.
key설정
- key값을 설정할 때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯 설정한다.
- key값은
항상 유일해야 하기 때문에, 데이터가 가진고유값을 key값으로 설정해야한다. - 고유값이 없을때에는 map함수에 전달되는 콜백함수의 index값을 사용하면 된다.
but, 항목의 순서가 바뀔 수 있는 index 사용을 권장하진 않는다.
why? 성능이 저하되기 때문!
✨프론트엔드 개발자가 되기 위한 독학러✨