리액트 강의 기억하기 : map

리액트 환경에서는 for 반복문을 활용해서 html을 줄일수도 있다.
근데 JSX하던 중간중간for을 쓰기는 어렵고 방법이 좀 필요하다.

예를 들어

var 어레이 = [2,3,4]; 

가 있다고 치자. 이 안쪽의 자료에 똑같은 작업을 하나씩 시켜주고 싶을때가 가끔 있는데 그때 map이라는 내장함수를 사용한다.

어레이.map(function(){}); 

이렇게...
모든 어레이에 부틸 수 있고 소괄호안에 코백함수 하나씩 넣는게 기본이라고 한다. 그러면 map안의 코드가 들어가 있는 만큼 실행되니까 3번 실행되겠넹

예시로 자료에 전부 10을 곱하고 싶으면

var 어레이 = [2,3,4];
어레이.map(function(a){
return a * 10}); 

이런식으로 적어주는 것이다.a라는 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해주는 역할이라고 한다. 원하는 걸 시켜주면 이 어레이의 경우 결과가 [4,8,6]으로 나오게 된다.

근데 참고로 map 함수는 원본 자료형을 변형시키지 않아서

보통 새로운 변수에 담아서 사용한다고 하는데.. 사실 막 한번에 이해가 빡! 오지는 않아서 계속 봐야 알 것 같다.

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});

이런식으로???

정리하면
1. 원하는 자료에다가 map을 붙이면 그 자료 갯수만큼 반복문을 돌릴 수 있다.
2. 반복을 원하는 HTML에다가 적는다. 4

글제목을 넣어서 반복문을 만들었는데 각각 다른 제목을 부여하고 싶어요

function App (){
return (

<div>
  HTML 잔뜩있는 곳
  ...
  { 글제목.map(function(a){
    return (
    <div className="list">
      <h3>{ a }</h3>
      <p>2월 18일 발행</p>
      <hr />
    </div>
  }) }
</div>

)
}

이렇게 쓰면 된다!
{ 글제목.map(function(){
return (

    <div className="list"> 
<h3>{ 글제목[1] }</h3>

.
.
.원래는이렇게 썼었음.
a라는 파라미터는 다른 이름으로 작명가능한것 같다. a라는 파라미터는 map이 반복될 때 마다 어레이 안에 있던 하나하나의 데이터를 의미한다 했으니 a = 넣고싶은 데이터들 이라고 이해하면 되는 듯 하다.

아이고 어렵다....배울게 산더미