1. 조건부 렌더링

• HTML 태그로 text-decoration: line-through 효과를 낼 수 있는 태그 = <del>
  (나머지 아는 내용은 패스)

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✔'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

🪤 && 조건식 함정: 화면에 의도하지 않은 숫자 0 등장?

🙋‍♀️ 주의
&&의 왼쪽에 숫자 넣지 말기 (특히 '0')

&&은 좌항이 null인지 여부만 판단
=> 왼쪽이 0이면 0을 그대로 가져와서 렌더링
(갑자기 어디서 나왔는지 모르겠는 0이라면 이 부분 의심)

// 🚫 messageCount가 0이면 좌항의 0을 그대로 렌더링
messageCount && <p>New messages</p>

// ✅ messageCount 길이를 판단하는 boolean
messageCount > 0 && <p>New messages</p>

// ✅ 숫자인 messageCount를 !! 연산자로 boolean으로 변환
!!messageCount && <p>New messages</p>

목록 렌더링

key 에러 해결

(리액트를 하다보면 많이 보게 되는 에러)

• 각 배열 항목에 해당 배열의 항목들 사이에서 고유하게 식별 가능한 문자열 또는 숫자인 key를 부여해서 해결

key의 역할

• 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주는 역할
  • 배열 항목이 이동(정렬), 삽입, 삭제될 때 중요
    (배열은 이동, 삽입, 삭제 시 앞뒤로 밀림)

key를 가져오는 곳

• DB의 데이터
  • DB에서 데이터를 가져와서 고유한 key/ID 사용
• 로컬에서 생성
  • 데이터가 로컬에서 생성되고 유지되는 경우 (예: 메모 작성 앱의 메모)
  • uuid 등의 패키지 사용

🙋‍♀️ 주의
map 자체에서 얻은 인덱스(id)는 사용하지 않는다. (아래에 이유 소개)

Key의 2가지 규칙

• key는 '형제' 간에만 고유하면 됨
  • 다른 배열의 JSX 노드에는 동일한 key를 사용해도 괜찮음
• key는 변경되지 않아야 함
  • Math.random() 등으로 렌더링 도중에 생성하지 말기

Key는 왜 필요할까?

• 재정렬로 인해 배열 내 항목의 위치가 변경되더라도 React가 특정 항목을 고유하게 식별 가능

key 지정 시 유의할 점 3가지

• key를 지정하지 않는 경우
  • 배열 자체의 인덱스를 사용하게 됨
  • 새 항목이 삽입, 삭제, 순서 이동 시 혼동이 올 수 있음
    => 배열은 값을 추가하거나 삭제하면 앞뒤로 밀린다.
• 렌더링 중에 즉석에서 key를 생성하는 경우 (예: key={Math.random()})
  • 렌더링될 때마다 key가 일치하지 않아 매번 모든 컴포넌트와 DOM이 다시 생성되어 속도가 느려짐
• key는 prop으로 동작하지 않음
  • 컴포넌트로 id를 받고 싶다면 별도의 prop을 사용해서 전달 (예: <Profile key={id} userId={id} />)