[React] 게임으로 배우는 리액트 - 반복문 (map, key)

---

render(){
    return (
        <>
            <h1>{this.state.result}</h1>
            <form onSubmit={this.onSubmitForm}>
                <input maxLength={4} value={this.state.value} onChange={this.onChangeInput} />
            </form>
            <div>시도 : {this.state.tries.length}</div>
            <ul>
                {['딸기','당근','수박','참외','메론'].map((v) => {
                     return (
                        <li>{v}</li>
                    );
                })}
            </ul>
        </>
    )
}

빨간색 영역부분에 배열이 있습니다.

이런 배열을 반복하여 출력하는 문법이 map이라고 볼수 있습니다.

<li></li>태그에 저 배열들을 담아야 하는데 map((v) => {}) map에 v를 담아서 <li>{v}</li>로 출력하게 됩니다.

이렇게 출력이 됩니다!

원래 이러한 방식으로 출력을 시키기 위해서는

<ul>
  <li>딸기</li>
  <li>당근</li>
  <li>수박</li>
  <li>참외</li>
  <li>메론</li>
</ul>

이러한 방식으로 써야하지만 코드가 복잡해지면 매우 불편하겠죠??

​

​

<li><b>딸기</b> - 빨강</li>
<li><b>당근</b> - 주황</li>
<li><b>수박</b> - 초록</li>
<li><b>참외</b> - 노랑</li>
<li><b>메론</b> - 연두</li>

그런데 이렇게 만들려면 어떻게 해야할까요??

​

이와 같이 2차원 배열로 만들어주고 v를 불러올때 v[0]번지와 v[1]번지를 불러오면 반복하게 됩니다.

['딸기',빨강']단위 하나가 v배열이 되는것이죠.

이런 v배열에서 v[0]번지를 불러오면 딸기 1번지를 불러오면 빨강이 호출됩니다.

​

​

아니면 이처럼 객체로 만들어줄수도 있습니다.

배열 안의 객체를 불러 오는 방법도 있습니다.

​

그런데 실행은 잘 되었지만 에러가 발생한것을 볼수 있습니다.

key가 빠졌기 때문인데요.

key의 값으로는 고유한 것이 들어가야합니다. 사실 fruit도 딸기가 2개가 들어간다면 고유하지 않을수도 있지만 편의상 고유한것으로 해두겠습니다.

만약 중복되는 값이 들어간다면 그것 또한 에러를 발생시킵니다.

에러가 사라졌죠??

​

​

또한 map 안의 arrow 함수에서는 return을 생략할수 있습니다.

​

​

v 오른쪽에 i는 index를 의미합니다.

이렇게 출력할때 {i}를 출력하게 되면 index값이 출력이 됩니다.

단 i 를 key의 값으로 넣게 문제가 생길수 있다고합니다.

key의 역할은 가독성을 높이는 성능 최적화의 역할인데 그 역할에 문제가 생긴다고 합니다.

{v.fiuit + i}로 작성하는 방법도 있지만 이 방법도 좋은 방법은 아니라고합니다.

요소가 추가만 되는 배열인 경우 i를 써도 무방하긴 합니다.