🚩 컴포넌트로 캡슐화 이후, 컴포넌트 각각의 세부내용이 다를 경우

→ 조건부 랜더링을 통해 조건에 부합하는 경우에만 화면에 출력한다.

✏

AppProfile.jsx

export default function AppProfile() {
  return (
    <>
      <Profile
        imgUrl="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80"
        name="Tommy"
        title="프론트엔드 개발자"
        **<u>isNew={true}</u>**
      ></Profile>

Profile.jsx

export default function Profile({ imgUrl, name, title, isNew }) {
  return (
    <div className="profile">
      <img className="photo" src={imgUrl} alt="avartar" />
      {isNew && <span className="new">NEW</span>

isNew가 true 인 첫번째 <profile>에만 new를 출력한다.

나머지 객체들엔 new라는 props를 전달해주지 않아도 에러가 나지 않는다.

undefined가 객체에 값이 되며, undefined 역시 false의 값이기 때문에 에러가 아닌 화면에 출력되지 않는다.