[React] map 함수 사용

 

map함수는 사실 react에 국한되는 내용은 아니다.

JS에 있는 함수를 그대로 react에 적용시킨것 뿐

 

  let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈'])
  let [player_age, setplayer_age] = useState(['92년생', '92년생', '97년생'])
  let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed'])

 

 

State로 배열을 생성해놓은 후

 

        {
        player_name.map(function (a, i) {
          return (
            <div className="list">
              <h4>{ a }</h4>
              <p>{player_age[i]}</p>
              <p>{footed[i]}</p>
              <hr style={{width:'30%'}}></hr>
            </div> )
        })
        }

 

 

map함수는 배열내의 요소 갯수만큼 반복 실행해주는 함수이다.

처음 map함수를 배웠을 때는

1:1로 매칭해준다고만 배워서

대체 그게 무슨소린가 했는데

 

역시 뭐든 직접해보지 않고는 모른다

 

 

  let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈'])

 

player_name의 배열을 갖는 State를 만들었고

 

player_name 뒤에 map을 붙여

배열의 길이만큼 html을 복사 붙여넣기 해줄수있다.

 

   player_name.map(function (a, i)

 

파라미터인 a와 i는

각각 앞 배열의 데이터와

배열을 0부터 1씩상승시키는 변수이다.

 

a는 player_name의 데이터인 '살라', '마네', '디아즈'가 포함되어있고

 

i는 player_name 배열의 개수를 0부터 증가시켜준다.

여기서는 0, 1, 2 이다.

 

 

따라서

 

        {
        player_name.map(function (a, i) {
          return (
            <div className="list">
              <h4>{player_name[i]}</h4>
               {/* == <h4>{a}</h4> */}
              <p>{player_age[i]}</p>
              <p>{footed[i]}</p>
              <hr style={{width:'30%'}}></hr>
            </div> )

        })
        }

 

이 함수는 <h4>태그에 player_name[0]부터 [2]까지 반복시키고

player_age와 footed도 각각 [0]번째 요소부터 [2]번째 요소까지 반복시킨다

 

player_name[i]에는 a를 넣어 사용해도 무방하다.