Monsters-Rolodex 1 | map() + key |

이제 Monsters-Rolodex 를 시작해 보자. 

 

 

기본 뼈대만 남긴다. 

 

 

 

일단 this.state에 몬스터 3개의 이름을 저장한다.

이 this.state 안에 담겨야 내용이 바뀌면 자동으로 렌더가 될 수있는 조건이 된다. 

 

 

 

this.state에 저장된 monster1의 name을

<h1>으로 UI 화면에 불러와본다. 

 

 

 

화면에 이름이 잘 나오는 것을 볼 수 있다. 

 

 

몬스터 이름 3개 다 나오게 하기

 

 

반복해서 코드를 작성해도 잘 동작하는 것을 볼 수 있다.

 

 

 

하지만 코드가 너무 반복적이다. 

map()을 이용해 코드를 좀 더 간편하게 만들어보자. 

 

 

 

일단 this.state에 있는 오브젝트들을 array 안으로 넣는다.

 

 

 

 

 

map() + key  

map()은 array method이다.

array 안에 있는 각 element들을 하나씩 돌면서

콜백 함수 안에 적용할 내용을 적어준 후  새 array에 담는다. 

 

map() 함수 설치하기 

 

 

 

 

 

 

 

이름이 잘 나온다.

 

 

여기서 주의할 사항은

map()을 사용할 때는 아이템에 key를 입력 시켜줘야 한다. 

입력 안했을 시 에러가 발생한다.

 map() 함수가 실행되면 같은 jsx elements들이 들어있는 리스트가 된다. 

각 element에 고유의 key를 주어 구분이 되도록 한다. 

 

각 아이템들이 유니크한 아이디를 가지고 있으면 

이름 하나가 바뀐 경우에도 전체를 할 필요없이

해당 부분만 key로 찾아서 리렌더 할 수 있다. 

 

key는 string이나 integer거나 상관없다.

 

key를 몬스터 이름으로 하면 이름이 같은 몬스터가 있을 수 있기 때문에 

대부분 유니크한 벨류인 id 로 쓴다.

모든 데이터들은 id 가지고 있다.

대부분 복잡한 스트링 형태를 띈다. 

 

 

 key 추가 하기  

일단은 id를 하드코드로 입력한 후 

key를 div 안에 추가한다.