일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- @tailwind base
- 클로저
- revalidatetag
- @tailwind
- commit phase
- SSR
- 자바스크립트
- image component
- interceptor routes
- revalidatepath
- 3진법 뒤집기
- @tailwind components
- 리액트
- dynamic pages
- static pages
- js
- server components
- supabase realtime
- iron-session
- unstable_nostore
- @tailwind utility
- createbrowserrouter
- client components
- CSS
- 프로그래머스
- RECOIL
- render phase
- sever action
- sever components
- 타입스크립트
Archives
- Today
- Total
개발하는 너구리
key 본문
React에서 컴포넌트에 부여하는 key 속성은 다음과 같은 이유로 사용됩니다
성능 최적화
key 속성을 사용하면 React가 컴포넌트의 변경 사항을 더 효율적으로 감지할 수 있습니다. 예를 들어, 리스트에서 각 항목에 고유한 key를 제공하면 React가 항목을 식별하고 재사용하거나 변경 사항을 추적할 수 있습니다.
재사용 가능한 컴포넌트 관리
리스트나 반복되는 요소들에서 key를 사용하면 React가 요소를 식별하고 관리할 수 있습니다. 이를 통해 React는 변경된 요소만 업데이트하고 나머지는 유지합니다.
동기화 문제 해결
동일한 컴포넌트를 여러 번 렌더링하거나 업데이트할 때 각 컴포넌트에 고유한 key를 제공하면 React가 각 컴포넌트를 서로 구별할 수 있습니다. 이를 통해 예기치 않은 동작이나 문제를 방지할 수 있습니다.
동적 목록 업데이트
동적인 리스트나 목록을 렌더링할 때 key를 사용하면 React가 새로운 항목을 쉽게 추가하거나 삭제할 수 있습니다. 특히 삭제된 항목이나 순서가 변경된 항목을 식별하는 데 사용됩니다.
const [answerState, setAnswerState] = useState('');
const [userAnswers, setUserAnswers] = useState([]);
const activeQuestionIndex =
answerState === '' ? userAnswers.length : userAnswers.length - 1;
<div id="question">
<QuestionTimer
key={activeQuestionIndex}
/>
</div>
사용예: 위의 코드처럼 key prop에 동적인 값을 할당해주면, 할당된 값이 변경될때마다 해당 key를 prop으로 부여받은 컴포넌트는 리렌더링이된다. 마운트 시 DOM에 기록된 컴포넌트를 리렌더링 할 필요성이 있을때 유용하다.
'TIL' 카테고리의 다른 글
rendering (0) | 2024.05.31 |
---|---|
useRef, useImperativeHandle, createPortal (0) | 2024.05.30 |
tsconfig.json (0) | 2024.05.27 |
Task Queue, Microtask Queue (0) | 2024.05.24 |
클로저 (0) | 2024.05.22 |