인프런 커뮤니티 질문&답변
작성한 질문수
실행이 잘되었지만 그래서 오히려 납득이 안되는 부분이 있습니다.
작성
·
358
3
안녕하세요 선생님. 좋은 강의 진심으로 감사드립니다.
실행이 잘 됩니다. 왜 잘 되지?하며 이해가 안되는 부분이 있어서 질문드립니다.
Attendance.jsx 코드를 보면 함수 정의 후 Attendance함수만을 export 하고 있습니다.
students 배열은 export되지 않고 있어
Attendance함수를 index.js에 불러가서 거기서 사용하면 거기는 students 배열은 불러가지 않았기 때문에
정의되지 않았다며 오류가 떠야할 것 같은 느낌이 들었는데 잘 실행이 되었습니다.
함수만을 export했는데 어떻게 students배열까지 index.js에서 잘 사용할 수 있는걸까요?
그리고 간단한 추가질문이 하나 더 있습니다.
저번 강의에서 리스트의 키값을 지정해주지 않으면 리액트에서는 자동으로 인덱스를 키값으로 설정한다라는 말씀을 잠깐하셨습니다.
그런데 왜 키값을 지정해주지 않았을 때 오류가 뜨는걸까요?
답변 1
1
안녕하세요, 소플입니다.
두 가지 질문에 대해 답변을 드립니다.
1. 컴포넌트 파일 내부에 있는 변수의 범위(scope)
students라는 배열은 AttendanceBook.jsx 파일 내부에서 선언하였고,
따로 export를 해주지 않았기 때문에 외부에서 가져다가 사용할 수는 없습니다.
하지만 현재 students 배열을 사용하는 것은 동일한 파일 내에 있는 AttendanceBook이라는 함수 컴포넌트이므로 정상적으로 작동하는 것입니다.
정리하면, const 변수의 범위(scope)는 선언된 파일로 지정되며,
별도로 export를 하지 않는 이상 다른 파일에서 액세스할 수 없습니다.
2. map() 함수 내부의 element에 키 값을 지정해줘야 하는 이유
먼저 강의에서 배운 리액트의 Virtual DOM 그림을 떠올려보시기 바랍니다.
리액트에서는 재렌더링을 할 때 이전 렌더링과 다음 렌더링의 변화를 계산(Compute Diff)합니다.
이러한 변화를 명확하게 잘 파악하려면 element들을 구분할 수 있는 고유한 값이 필요합니다.
이전 렌더링과 비교해서 어떤 항목이 변경, 추가 또는 제거되었는지를 빠르게 식별할 수 있는 것이죠.
그리고 특별히 map() 함수를 사용하는 경우 동일한 element가 여러 번 렌더링 되기 때문에,
동일한 element들을 구분하기 위해서 이러한 key 값을 꼭 넣도록 유도하는 것입니다.
감사합니다.
감사합니다!