[React] 3-3 리액트 반복분(map, key)

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

map

반복되는 부분을 배열로 만들어서 map 함수를 이용해준다.

배열을 다룰때 자주 사용됨! 

배열의 각 원소들을 앞에서 부터 하나씩 가져오고 보통은 화살표함수랑 같이쓰임

<ul>
    {/* 반복되는 걸 배열로 만들자 */}
    {['사과','배','바나나','포도','딸기'].map((v)=> {
        return(
            <li>{v}</li>
        );
    })}
</ul>

 

key

아래와 같은 경우 어떻게 만들어 줄까 ? 

<li> <b> 사과</b> - 맛있다 </li>
<li> <b>바나나</b> - 맛없다 </li>
<li> <b>포노</b> - 시다 </li>
<li> <b>감</b> - 떫다 </li>

실무에서는 1차원적인 배열이 아닌 좀더 복잡하게 태그들이 얽혀있는 경우가 많다.

<ul>
    {/* 반복되는 걸 배열로 만들자 */}
    {[['사과','맛있다'],['배','달다'],['바나나','맛없다'],['포도','싫어'],['딸기','좋아']].map((v)=> {
        return(
            <li><b>{v[0]}</b> - {v[1]}</li>
        );
    })}
</ul>

['사과','맛있다'], 이부분이 통채로 v가 된다. 

즉 v의 1번째부분, v의 2번째 부분을 꺼내와주면 된다!

 

 

위처럼 2차원 배열이 아닌 객체를 사용하는 경우가 많은데,

아래와 같은 경우는 v가 뭐가 될까 ? 

{fruit: "사과", taste :"맛있다"},

 

{fruit: "사과", taste :"맛있다"},
{fruit: "배", taste :"달다"},
{fruit: "바나나", taste :"맛없다"},
{fruit: "포도", taste :"싫어"},
{fruit: "딸기", taste :"좋아"},

<li>
  <b>{v.fruit}</b> - {v.taste}
</li>

이렇게 해주면 된다!

 

리액트를 처음할때는 가독성이 떨어진다! 라고 느끼는 사람이 많은데, 가독성이 좋게 만들어주는것이 바로 props임! 

성능에도 필수적임! 

 

 

map을 돌릴때는 항상 key를 추가해주어야한다. 하지않으면 에러가 뜸.. ㅠ 

Warning: Each child in a list should have a unique "key" prop.

라는 에러가 나온다면 이부분때문에 나는 오류임 ㅠ

 

 

{fruit: "사과", taste :"맛있다"},
{fruit: "배", taste :"달다"},
{fruit: "바나나", taste :"맛없다"},
{fruit: "포도", taste :"싫어"},
{fruit: "딸기", taste :"좋아"},
{fruit: "사과", taste :"맛있다"},​

위의 경우 key는 고유할까? 

노노 사과가 중복되기때문에 고유하지 않다. 

뭔가 고유하게 만들어주기 위해 마지막 사과를 맛없다 와같은 값을 넣어줘야한다.

 

중복에 주의 하자!  key를 고유하게 만들어주자! 

 

<ul>
  {/* 반복되는 걸 배열로 만들자 */}
  {[
    {fruit: "사과", taste :"맛있다"},
    {fruit: "배", taste :"달다"},
    {fruit: "바나나", taste :"맛없다"},
    {fruit: "포도", taste :"싫어"},
    {fruit: "딸기", taste :"좋아"},
  ].map((v , i) => {// i index 
    return ( 
      <li>
        <b>{v.fruit}</b> - {v.taste}
      </li>
    );
  })}
</ul>

map에는 i를 사용할 수 있다. index의 느낌으로 사용된다.

i는 고유함 절대 곂칠일이 없음.
key에 i를 쓰면 나중에 성능최적화에 문제가 됨 차라이 v.fruit+i... 하지만 이것도 나쁜 방식