728x90 300x250 SMALL 분류 전체보기1115 여러개 리스트 컴포넌트 key ID로 추가하기 - 비공개 보호되어 있는 글 입니다. 2025. 1. 16. 리스트 컴포넌트 key 추가하기 1. 키가 없는 기본적인 리스트 컴포넌트import React from "react";function ListItem({ item }) { return {item};}function List() { const items = ["Apple", "Banana", "Orange", "Grapes"]; return ( {items.map((item) => ( ))} );}export default List; 이 코드는 items 배열을 map()메서드로 순회하면서 각 항목을 ListItem컴포넌트로 변환한다.하지만 이 상태에서는 key 속성이 없기 때문에, 리액트는 항목들을 구분할 수 없어, 변경된 항목을 효율적으로 처리할 수 없다. 2. key를 추가한 .. 2025. 1. 15. 여러 개의 컴포넌트 렌더링하기 리액트에서 여러 개의 컴포넌트를 렌더링하는 것은 매우 일반적인 작업이다.여러 개의 컴포넌트를 렌더링하려면, 주로 배열이나 반복문을 사용하여 컴포넌트들을 동적으로 생성하고 렌더링한다.컴포넌트를 여러 개 렌더링하는 과정에서 중요한 점은 리스트 렌더링, 조건부 렌더링, 그리고 고유한 키(key)설정이다.다음은 여러 개의 컴포넌트를 렌더링하는 방법에 대한 자세한 설명이다. 1. 배열을 사용하여 컴포넌트 렌더링하기리액트에서는 배열을 사용하여 여러 개의 컴포넌트를 동적으로 렌더링할 수 있다. 배열의 각 항목을 맵핑하여 컴포넌트로 변환한다.import React from "react";// 아이템을 표시할 컴포넌트function Item({ name }) { return {name};}function ItemLi.. 2025. 1. 14. 리액트에서 키(key) 키(key)리액트에서 key는 리스트 항목을 고유하게 식별하는데 사용되는 속성이다. key는 주로 리스트의 항목이 동적으로 추가되거나 삭제될 때, React가 어떤 항목이 변경되었는지 추적하고, 리렌더링을 최적화할 수 있게 도와준다. 키가 중요한 이유리렌더링 최적화 : 리스트 항목의 순서가 변경되거나, 항목이 추가/삭제될 때, React는 key를 사용해 각 항목의 고유성을 식별하고, 불필요한 렌더링을 방한다.고유 식별 : key 값이 고유해야 하며, 동일한 리스트에서 중복되지 않아야 한다. 중복되면 React가 어떤 항목을 업데이트해야 하는지 알기 어려워 성능 문제가 밸상할 수 있다. key의 사용 방법리스트의 각 항목에 key속성을 추가해야 한다.const items = ["Apple", "Bana.. 2025. 1. 13. 이전 1 ··· 4 5 6 7 8 9 10 ··· 279 다음 728x90 반응형 LIST