List와 Key

## 2021/01/11

1. List

: 배열과 같다.

React에서는 배열을 사용해 다수의 element를 랜더링 할 수 있다!

Example

→ A와 B 라는 두 개의 component로 구분해서 보았을 때 A의 component에 들어갈 props와 B의 component에 들어갈 props의 값을 각각 배열로 갖고 랜더링을 시킨다면 같은 component안에서 여러가지 다수의 element생성이 가능하다.

//state정의 - 배열이 들어가 있음
        this.state={
            students: [
                // key가 빠졌다는 경고->id추가
                {id: 1, name: 'Susan'},
                {id: 2, name: 'Mike'},
                {id: 3, name: 'Jane'},
                {id: 4, name: 'Brad'},
                {id: 5, name: 'Kate'},
                {id: 6, name: 'Leo'},
                {id: 7, name: 'Steve'},
                {id: 8, name: 'Susan'},
                {id: 9, name: 'jack'}
            ]
        }

→ 객체에 배열을 집어넣듯이 하면 된다!

2. Key

: 아이템들을 구분하기 위한 고유한 문자열이다.

key는 자신이 속한 해당 element(list)에서만 고유하면 된다!!

서로 다른 리스트에서는 key값이 같아도 상관이 없다!

(비유⇒ 주민번호, 학번, 핸드폰 전화번호 등)

<주의>

→key는 리스트의 아이템 안에 들어가야 한다!

Example

const studentList = students.map((student)=>
   <li key={student.id}>{student.name}</li>
);

++Add

• map함수 안에 있는 element는 key가 꼭 필요하다. → 계속 반복적으로 사용되는 아이템들은 구분할 수 있는 고유의 key가 꼭 필요하기 때문이다.

  //jsx안에 map함수를 사용한 코드
  //이 방식이 더 간단함.
  {students.map((student)=>
        <li key={student.id}>{student.name}</li>
  )}

• key는 props에 전달되지 않는다. 별도의 props로 key에 넣어줘야 한다.