Тёмный
No video :(

프론트엔드 개발자 면접 단골 질문 4 | key에 배열 index를 사용하면 안되는 이유 

프론트맨
Подписаться 2,8 тыс.
Просмотров 3 тыс.
50% 1

원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.
*React에서 사용되는 key는 무엇인지 설명하세요*
Key는 리스트를 매핑하여 동일한 컴포넌트를 여러 개 렌더링할 때 각 컴포넌트에 전달되는 고유한 값입니다. 재조정 단계에서 각 노드의 key 값들을 비교하여 리스트에 추가, 삭제, 혹은 순서가 변경된 노드를 식별하고, 이를 통해 필요한 re-rendering만 수행하기 위해 사용합니다.
*배열의 index를 key값으로 하면 안되는 이유가 무엇인가요?*
배열의 인덱스를 key 값으로 사용하면 안 되는 이유는 순서가 변경되어도 동일한 key 값이 유지되기 때문입니다. A,B,C 순서로 rendering되어 있던 컴포넌트가 C,B,A 순서로 변경되어도 key값은 동일하기 때문에, 재조정 단계에서 re-rendering 대상으로 식별하지 않을 가능성이 생깁니다. 따라서, 배열 내에서 순서가 변경되어도 각 컴포넌트의 key값이 변경되지 않는 고유한 값으로 설정해야 합니다.
*고유한 속성값을 주기 어려울 때는 어떤 값으로 대체할 수 있나요?*
컴포넌트에 전달되는 각 props를 적절히 조합하여 서로 겹치지 않는 id를 만드는 것이 효과적입니다. 이런 방식으로도 고유한 id를 할당하기 어려운 경우에는, 랜덤한 UUID를 생성하여 key값으로 전달할 수 있습니다. UUID는 128비트로 이루어져 있기 때문에, 서로 겹칠 가능성이 극히 적기 때문입니다. 하지만, UUID는 16바이트라는 비교적 큰 사이즈를 갖기 때문에, 메모리 공간을 효율적으로 사용할 수 없다는 단점이 있습니다.

Опубликовано:

 

27 мар 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 4   
@FindGreatCompanies
@FindGreatCompanies 21 день назад
특정 컴포넌트가 리렌더링될 때 State가 초기화 되기를 원하는데, 위치와 타입이 같아서 초기화되지 않는 경우에도 key를 다른 값을 지정함으로써 해결하기도 합니다!
@user-fw2se9ms4i
@user-fw2se9ms4i 13 дней назад
맞습니다ㅎㅎ그런 경우가 종종 있죠~ 부연 설명 감사합니다!!
@user-fn2er6ro3y
@user-fn2er6ro3y 3 месяца назад
오우 사실 그냥 넘어갔던 것들인데 리마인드했습니다… 감사합니당
@user-fw2se9ms4i
@user-fw2se9ms4i 3 месяца назад
도움이 되셨다니, 다행입니다 :) 앞으로도 유익한 내용으로 찾아뵙겠습니다ㅎㅎ
Далее
DOM & CSSOM - 프론트엔드 개발자 필수지식
11:23
You are using useFetch WRONG! (I hope you don't)
11:14