조건부 렌더링

1️⃣ JSX의 조건부 렌더링

React는 if 문, && 연산자, ? : 삼항 연산자 등을 사용하여 JSX를 조건에 따라 렌더링할 수 있음

2️⃣ 다양한 조건 처리 방식

if 문을 사용하여 명확한 조건 처리가 가능하며, && 연산자는 특정 조건이 참일 때만 JSX를 렌더링하는 데 유용함

? : 삼항 연산자를 활용하면 간결한 조건부 렌더링이 가능함

조건부로 JSX 반환하기

짐을 챙겼는지 안 챙겼는지 표시할 수 있는 여러 개의 Item을 렌더링하는 PackingList 컴포넌트가 있다고 가정해봅시다.

1️⃣ isPacked prop을 활용한 조건부 렌더링

isPacked가 true인 경우 항목에 체크 표시(✅)를 추가할 수 있음

2️⃣ if/else 문을 사용한 구현

if/else 문을 활용하여 isPacked 값에 따라 다른 JSX를 렌더링할 수 있음

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

1️⃣ isPacked가 true일 때 JSX 변경

isPacked가 true이면 다른 JSX 트리를 반환하여 일부 항목에 체크 표시(✅)를 추가함

1️⃣ 분기 로직 확인

각 경우를 수정하고 반환 결과가 어떻게 달라지는지 확인해 보세요.