TIL12 | 내가 보려고 올리는 - "Map 함수 적용시 key props를 부여하는 이유"

key 는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리멘트에 저장해야 합니다.

또한 key는 포인터와 같은 역할을 합니다

const [listComments, setListComments] = useState([{name : '', comment : ''}]) 

<div>
{listComments.mao(el => (<Comment name={el.name} comment ={el.comment}/>
))}
</div>

el 은 매개변수 listComments를 받는다 그러나 다 받는것이 아니고 하나씩만 받는다.
예를 들어 아래와 같이 1,2,3,4 를 map sjgdmaus 2씩 곱해서 하나씩 돌려준다.

const array1 =[1,2,3,4]
// pass a function to map
const map1 = array1.map(x => x*2);

console.log(map1);
// expected output : Array[2,4,6,8]

이 map 이용해서 listcomments의 names과 comments에 접급해서 변환된 값을 탐지해서 Virtual Dom 을 수정을 해주고 그것을 DOM과 비교해서 바뀐 부분을 수정한 화면을 렌더링 하게된다

만약에 키값을 사용하지 않느다면 컴퓨터가 뭔가 인지를 못하고 다시 처음부터 만드는 식으로 하지만, key값ㅂ을 줌으로써 필요한 부분만 수정하는 식으로 할 수 있게 된다.
여기서 key값은 최상위에 쓰여져야 하고, 서로 겹쳐지지 않게 유니크해야한다
그래서 보통 ID 값을 부여한다.