프레임워크/리액트 React
map()
raim-2
2023. 1. 17. 01:33
반응형
리액트에서 반복문 처리
JSX에서 자바스크립트 사용시 중괄호를 쓰고, 안에다 입력한다.주로 사용했던 조건문인 if문 대신 {} 안에서 삼항 연산자를 사용했듯,반복문을 처리할 때는 for문 대신 map() 을 이용해 반복문을 처리해야 한다.
array.map()
⭐반복문 사용 시 유용하다!
- array의 자료 개수만큼 함수 안의 코드를 실행해준다.
- 함수의 파라미터는 array 안에 있던 자료이다.
- return 오른쪽에 있는 것 array에 담아준다.
//array.map(콜백함수);
array.map(function() {
실행할 코드
});
[1,2,3].map(function(a) {
console.log(a) // 1,2,3 순서대로 나옴
});
[1,2,3].map(function(a) {
return '123' // ['123','123','123']
});
- 리액트에선 return에 html 태그를 넣어도 반복 재생해 배열에 넣어준다.
- 코드가 여러줄일 때는 return () 소괄호 안에다 코드를 넣어준다.
{
[1,2,3].map(function(){
return <div>안녕</div>
})
}
{
[1,2,3].map(function(){
return (
<div>안녕</div>
<div>안녕</div>
)
})
}
* 콜백함수
다른 함수의 인자로 전달된 후 함수 내부에서
필요할 때(바로 사용할 수도 나중에 사용할 수도 있음) 콜백함수를 호출해 사용한다.
array.map(function(a,i) {
실행할 코드
});
//a는 파라미터/매개변수
//i는 반복문 돌 때마다 0부터 1씩 증가하는 정수
//콜백함수와, map함수를 이용하여 jsx 내에서 반복문을 만들 수 있다.
{
글제목.map(function(a){
return (
<div className="list">
<h4>{a}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}
{
글제목.map(function(a, i){
return (
<div className="list">
<h4>{글제목[i]}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}
📍반복문으로 html 생성시 뜨는 에러메세지
→ key={html 마다 다른 숫자} 추가해야 한다.
→ 반복 생성한 UI마다 각각 다른 숫자를 가져야 함
{
글제목.map(function(a, i){
return (
<div className="list" key={i}>
<h4>{글제목[i]}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}