코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.
강의 내용 출처는
https://codingapple.com/course/react-basic/
모든 저작권은 코딩애플에게 있습니다.
map
: 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때
똑같은 div이 반복될때 for문을 사용하면 쉽게 div들을 만들 수 있는데
JSX에서는 for문을 사용하지 못하여 map함수를 사용한다.
map함수 사용법
map함수의 기본형은
var ary = [2,3,4];
ary.map(function(){
console.log(1)
});기능 1) array안에 들어있는 자료 갯수만큼 안에 있는 코드를 반복해준다.
위 코드는 ary안에 요소가 3개이므로 3번 function안에 내용을 반복해준다.
실행 결과 : console창에 1이 3번 출력된다.
기능2) 콜백함수에 파라미터를 작명하면 그 파라미터는 array 안의 데이터를 하나씩 출력해준다.
( function(이거) 괄호 안에를 콜백함수라고 한다)
var ary = [2,3,4];
ary.map(function(a){
console.log(a)
});실행 결과 : console창에 2,3,4 출력됨
기능3) return 오른쪽에 작성한 내용을 array로 담아준다. 그리고 map() 작성한 자리에 남겨준다.
var ary = [2,3,4];
var newArray = ary.map(function(a){
return a * 10
});
console.log(newArray)위 코드는 일단 a는 array안에 있는 데이터들이니까
a * 10의 결과를 출력해주지 않을까 ?
실행결과 : 20, 30, 40
이런 기능들을 가진 map함수로 어떻게 html을 반복 생성하는 방법은
function App (){
return (
<div>
{
[1,2,3].map(function(){
return ( <div>안녕</div> )
})
}
</div>
)
}위 코드는 안녕 이라는 내용이 담긴 div를 3번 만들어 준다.
실행 내용을 풀어보면
array.map(function(){
return ()
}위 코드가 원형이고
array를 import해오지 않고 직접 붙였다.
[1, 2, 3] 자료 개수만큼 반복해주니 3번 반복해준다.
그리고 return 안에 내용을 3번 반복해주는데
return 안에
<div>안녕</div>이렇게 적혀있으니 이 내용을 3번 반복해준다.
html상으로는
<div>안녕</div>
<div>안녕</div>
<div>안녕</div>state도 array자료형으로 되어있다면 map을 붙일 수 있다.
그러면 같은 코드만 반복하는 것이 아니라 반복하면서 일정 부분만 변경할 수 없을까 ?
이전에 사용했던 코드를 활용해보면
(생략)
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
(생략)
function App (){
return (
<div>
(생략)
{
글제목.map(function(a){
return (
<div className="list">
<h4>{ a }</h4>
<p>2월 18일 발행</p>
</div> )
})
}
</div>
)
}글제목이라는 array형 state를 가져오고 그 안에는 3개의 자료들이 존재하는데
아까 콜백함수에 아무렇게나 작명하면 array안의 자료형을 보여준다고 했다.
h4안에 { a }를 해주면 map함수가 돌아가면서
첫 번째 h4에는 array의 첫 번째 자료가 나오고
두 번째 h4에는 array의 두 번째 자료가 나오고
세 번째 h4에는 array의 세 번째 자료가 나오고
이렇게 된다.
아니면 이런 다른 방법으로는
function App (){
return (
<div>
(생략)
{
글제목.map(function(a, i){
return (
<div className="list">
<h4>{ 글제목[i] }</h4>
<p>2월 18일 발행</p>
</div> )
})
}
</div>
)
}map(function(a, i){
이렇게 파라미터를 2개까지 작명 가능한데
첫번째 파라미터 a는 array안에 있던 자료
두번째 파라미터 i는 0부터 1씩 증가하는 정수가 되어서 그렇다.
그러면 첫번째 h4에는 글제목[1]이 들어가므로
글제목이라는 array의 첫번째 자료가 나오게 된다.
참고) map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해야한다.
<div className="list" key={i}> 그래야 리엑트가 div들을 구분할 수 있기 때문이다.
