리액트 반복문(key)

아래 문구를 리액트 반복문으로 써보자.

                    <li><b>사과</b> - 맛있다</li>
                    <li><b>바나나</b> - 맛있다</li>
                    <li><b>포도</b> - 맛있다</li>
                    <li><b>귤</b> - 맛있다</li>
                    <li><b>복숭아</b> - 맛있다</li>
                    <li><b>메론</b> - 맛있다</li>
                    <li><b>수박</b> - 맛있다</li>

2차원 배열로 일단 만들어보자.

                <ul>
                    {[['사과', '맛있다'], 
                    ['바나나', '맛있다'], 
                    ['포도', '맛있다'], 
                    ['귤', '맛있다'], 
                    ['복숭아', '맛있다'], 
                    ['메론', '맛있다'], 
                    ['수박', '맛있다'],
                ].map((v) => {
                        return (
                            <li><b>{v[0]}</b> - {v[1]}</li>
                        );
                    })}
                    {/* <li><b>사과</b> - 맛있다</li>
                    <li><b>바나나</b> - 맛있다</li>
                    <li><b>포도</b> - 맛있다</li>
                    <li><b>귤</b> - 맛있다</li>
                    <li><b>복숭아</b> - 맛있다</li>
                    <li><b>메론</b> - 맛있다</li>
                    <li><b>수박</b> - 맛있다</li> */}
                </ul>
            </>
        );
    }
}

객체로 하는거도 위 방법과 유사하다.

                <ul>
                    {[
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '바나나', taste: '맛있다'},
                        { fruit: '포도', taste: '맛있다'},
                        { fruit: '귤', taste: '맛있다'},
                        { fruit: '딸기', taste: '맛있다'},
                        { fruit: '참외', taste: '맛있다'},
                        { fruit: '수박', taste: '맛있다'},
                ].map((v) => {
                        return (
                            <li><b>{v.fruit}</b> - {v.taste}</li>
                        );
                    })}
                    {/* <li><b>사과</b> - 맛있다</li>
                    <li><b>바나나</b> - 맛있다</li>
                    <li><b>포도</b> - 맛있다</li>
                    <li><b>귤</b> - 맛있다</li>
                    <li><b>복숭아</b> - 맛있다</li>
                    <li><b>메론</b> - 맛있다</li>
                    <li><b>수박</b> - 맛있다</li> */}
                </ul>

 

그리고 빠진 것이 있는데 key(고유값)이다. 리액트는 key를 보고 같은 컴포넌트인지 아닌지를 판단하기 때문에 key를 넣어주자. 

 

화살표 함수에서 return 생략가능 한데 이유는

화살표 함수에서 소괄호가 있는 것 혹은 소괄호가 없는 것은 return 생략 가능 한 것이다.

                <ul>
                    {[
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '바나나', taste: '달다'},
                        { fruit: '포도', taste: '시다'},
                        { fruit: '귤', taste: '떪다'},
                        { fruit: '딸기', taste: '매우 시다'},
                        { fruit: '참외', taste: '매우 달다'},
                        { fruit: '수박', taste: '매우 시원하다'},
                ].map((v) => (
                            <li key={v.furit + v.taste}><b>{v.fruit}</b> - {v.taste}</li>
                    ))}
                    {/* <li><b>사과</b> - 맛있다</li>
                    <li><b>바나나</b> - 맛있다</li>
                    <li><b>포도</b> - 맛있다</li>
                    <li><b>귤</b> - 맛있다</li>
                    <li><b>복숭아</b> - 맛있다</li>
                    <li><b>메론</b> - 맛있다</li>
                    <li><b>수박</b> - 맛있다</li> */}
                </ul>

 

그리고 key 안에는 v나 i를 넣어주면 안된다. 성능최적화 할 때 문제가 생긴다.

 <li key={i}><b>{v.fruit}</b> - {i}</li>

차라리 아래와 같이 쓰는 것이 낫다. 나쁜 방법이긴 하다. 문자라도 하나 더 붙인다. (그냥 쓰지말고 문자를 넣어주자)

<li key={v.fruit + i}><b>{v.fruit}</b> - {i}</li>

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의