React

React에서 map(배열)의 index를 key 값으로 하면 안되는 이유

Key의 역할과 중요성 React에서는 컴포넌트 리스트를 렌더링할 때 각 요소에 고유한 key를 지정해야 합니다. key는 React가 각 컴포넌트를 구별하고 추적하는 데 사용되며, 업데이트 시 효율적으로 DOM을 업데이트하는 데에 중요한 역할을 합니다. key가 없거나 중복된 key를 사용하면 React가 잘못된 컴포넌트를 업데이트하거나 불필요한 렌더링을 발생시킬 수 있습니다. 배열의 index를 key로 사용하는 문제점 예를 들어 다음과 같은 과일 배열이 있습니다. const fruits = ['apple', 'banana', 'orange']; 이 배열을 컴포넌트로 렌더링하고 index를 key로 사용하면 const fruitList = fruits.map((fruit, index) => ); 다음..

React

[React] JSX 제한사항 (Fragment)

JSX를 작성할 때 루트 JSX 요소가 1개만 있어야 하고 나란히 있으면 안된다. ... return ( Hi! This does not work! ); 해결 방법 1. div 로 감싸기 ... return ( Hi! This does not work! ); 전체를 div 로 감싸서 루트 JSX 요소가 1개만 있게 만든다. 2. 배열로 감싸기 아래 코드와 같이 배열 요소로 JSX를 묶어서 반환하는 방법이 있습니다. ... return [ Hi! , This does not work! ]; 이때 전체를 감싸고 있는 중괄호{} 가 있다면 제거 해야합니다. 예를 들어 이런 코드가 있다면 ... return ( {error && ( )} ) ... return [ error && ( ) ] 위 처럼 변경 해줘야..

놀이터주인장
'React' 태그의 글 목록