1. 0은 JSX에서 유효한 값

JavaScript에서는 0이 falsy한 값이지만 JSX는 0은 truthy한 값으로 동작합니다.

이러한 특성 때문에 JSX에서는 0를 주의해서 사용해야합니다.

아래 코드에서 list.length가 0이라면 0은 유효한 값이 되어 화면에는 0이 렌더링 되게됩니다,

export default function App() {
	return (
    {list.length && list.map((el)=>{
			<li>{el}<li>
		})}
  );
}

따라서 값을 명확하게 처리해야합니다.

export default function App() {
	return (
    {list.length > 0 && list.map((el)=>{
			<li>{el}<li>
		})}
  );
}

2. list 내부의 key

고유한 key 속성이 필요한 이유는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데 사용하기 위해서 입니다.

function App() {
	return (
		<ul>
		  {["Jon", "Jane", "Mike", "Kim", "Lee"].map((el)=>
				<li key={el}>{el}님의 게시글 입니다.</li>
      )}
		</ul>
	)
}

index key 지양하기

map() 함수의 변환 함수의 두 번째 인자는 해당 배열 요소의 인덱스를 반환합니다.

그럼 이 index를 사용해서 key값을 사용하면 어떨까요?

index는 고유한 값이기 때문에 괜찮을거라 판단됩니다.

하지만 index로 key값을 사용하면 문제가 발생할 수 있습니다.