실행이 잘되었지만 그래서 오히려 납득이 안되는 부분이 있습니다.

안녕하세요, 소플입니다.

두 가지 질문에 대해 답변을 드립니다.

1. 컴포넌트 파일 내부에 있는 변수의 범위(scope)

students라는 배열은 AttendanceBook.jsx 파일 내부에서 선언하였고,

따로 export를 해주지 않았기 때문에 외부에서 가져다가 사용할 수는 없습니다.

하지만 현재 students 배열을 사용하는 것은 동일한 파일 내에 있는 AttendanceBook이라는 함수 컴포넌트이므로 정상적으로 작동하는 것입니다.

정리하면, const 변수의 범위(scope)는 선언된 파일로 지정되며,

별도로 export를 하지 않는 이상 다른 파일에서 액세스할 수 없습니다.

2. map() 함수 내부의 element에 키 값을 지정해줘야 하는 이유

먼저 강의에서 배운 리액트의 Virtual DOM 그림을 떠올려보시기 바랍니다.

리액트에서는 재렌더링을 할 때 이전 렌더링과 다음 렌더링의 변화를 계산(Compute Diff)합니다.

이러한 변화를 명확하게 잘 파악하려면 element들을 구분할 수 있는 고유한 값이 필요합니다.

이전 렌더링과 비교해서 어떤 항목이 변경, 추가 또는 제거되었는지를 빠르게 식별할 수 있는 것이죠.

그리고 특별히 map() 함수를 사용하는 경우 동일한 element가 여러 번 렌더링 되기 때문에,

동일한 element들을 구분하기 위해서 이러한 key 값을 꼭 넣도록 유도하는 것입니다.

감사합니다.