컴포넌트와 JSX

function UserCard({ user }) {
  const displayName = user.nickname ?? user.name;

  return (
    <>
      <h3 className="card-title">{displayName}</h3>
      <p>{user.email}</p>
      {/* 주석은 이렇게 씁니다 */}
      <label htmlFor="agree">동의</label>
      <input id="agree" type="checkbox" defaultChecked={user.agreed} />
    </>
  );
}

중괄호 안에서 계산을 길게 하기보다, 위쪽에서 변수로 만들어 두면 읽기 쉬워집니다.

function SearchBar({ keyword, onKeywordChange, onSubmit }) {
  return (
    <form onSubmit={onSubmit}>
      <input
        value={keyword}
        onChange={(event) => onKeywordChange(event.target.value)}
      />
      <button type="submit">검색</button>
    </form>
  );
}

// 상태는 부모가 가지고 있습니다
function OrderSearchPage() {
  const [keyword, setKeyword] = useState("");

  return (
    <SearchBar
      keyword={keyword}
      onKeywordChange={setKeyword}
      onSubmit={handleSubmit}
    />
  );
}

SearchBar는 상태를 갖지 않고 받은 값만 표시합니다. 이런 컴포넌트는 재사용과 테스트가 쉽습니다.

function OrderPanel({ order, isLoading }) {
  // 1) 이른 반환: 조건이 명확할 때 가장 읽기 쉽습니다
  if (isLoading) {
    return <Spinner />;
  }

  return (
    <div>
      {/* 2) 삼항 연산자: 둘 중 하나를 고를 때 */}
      {order.isPaid ? <PaidBadge /> : <PendingBadge />}

      {/* 3) && 연산자: 조건이 참일 때만 표시 */}
      {order.memo && <p className="memo">{order.memo}</p>}
    </div>
  );
}

&& 를 쓸 때 왼쪽이 숫자 0이면 0이 화면에 그대로 출력됩니다. 개수를 조건으로 쓸 때는 count > 0 처럼 명확한 비교식을 씁니다.

function OrderList({ orders }) {
  if (orders.length === 0) {
    return <p className="empty">조회된 주문이 없습니다.</p>;
  }

  return (
    <ul>
      {orders.map((order) => (
        <li key={order.id}>
          <OrderRow order={order} />
        </li>
      ))}
    </ul>
  );
}

빈 목록 처리를 먼저 해 두면 화면이 비어 보이는 상황을 막을 수 있습니다. 실무에서 자주 빠뜨리는 부분입니다.

// 위험: 순서가 바뀌거나 중간이 삭제되면 어긋납니다
{items.map((item, index) => <Row key={index} item={item} />)}

// 위험: 렌더링마다 값이 바뀌어 매번 새로 만들어집니다
{items.map((item) => <Row key={Math.random()} item={item} />)}

// 권장: 데이터의 고유 식별자
{items.map((item) => <Row key={item.id} item={item} />)}