I'm a Fig, Not a Pig

1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. 리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다. 1. 성능 최적화를 위해 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 하나씩 살펴보자. 1. 성능 최적화를 위해 배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다. 이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다. 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 요소마다 key로 고유한 값을 지정해주어야 요소를 삭제..

저번 데일리 퀴즈 문제를 내면서 import React from 'react'; 를 왜 적어줘야 하는지에 대한 글을 발견했다. import React from 'react';를 적어줘야 하는 이유는 다음과 같다. 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해 주어야 한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객..