한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

📌 Tools React Developer Tools를 사용하게 되면, 크롬 웹 브라우저에서 개발자 모드(F12)로 컴포넌트 구조를 볼 수 있고 변경하면서 테스트하기에 용이하다. (사용 권장👍) https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 📌 Extension Reactjs Code Snippets rcc + tab, rsi..