[React] Rendering

Rendering(렌더링)

• 작성한 코드를 화면에 출력하는 기능

interface IItem {
	name: string;
  isPacked: boolean 
}

function Item({name, isPacked}: IItem) {
  //! if 조건문을 사용한 조건부 렌더링
  // if(isPacked){
    // return(
      //     <li>{name} 😊</li>
  //   ) 
  //   } else{
  //     return(
  //       <li>{name}</li>
  //     )
  //   }
  
    //! 삼항 연산자를 사용한 조건부 렌더링
  // : 조건 ? 참일 경우 : 거짓일 경우
  // return(
  //   <li>
  //     {/* HTML 내에서 JS문법 사용 시: {}내에 작성 */}
  //     { isPacked ? name + '🌟' : name}
  //   </li>
  // )

  //! 논리 연산자를 사용한 조건부 렌더링
  return(
    <li>
      {/* 
        논리 연산자
        && 연산자 (a && b: 둘다 true 여야만 true값이 반환)

        A && B
        - A의 값이 false인 경우 B의 값 출력 (X)
        - A의 값이 true인 경우 B의 값 출력 (O)
      */}
    { name } { isPacked && '👌'}
    </li>
  )
}

//# 부모 컴포넌트
export default function Rendering01() {
  return (
    <div>
      <p>여행용 짐 목록</p>
      <ul>
        <Item name='과자' isPacked= {true}/>
        <Item name='김밥' isPacked= {false}/>
        <Item name='음료수' isPacked= {true}/>
      </ul>
    </div>
  )
}

//! 배열 렌더링
// map, filter

export default function Rendering02() {
  const people = ["홍동현", "홍길동", "윤대휘", "정규민", "김소빈"];

  const peopleDescription = [
    {
      id: 0,
      name: "홍동현",
      job: "developer",
    },
    {
      id: 1,
      name: "홍길동",
      job: "operation",
    },
    {
      id: 2,
      name: "윤대휘",
      job: "business",
    },
    {
      id: 3,
      name: "정규민",
      job: "business",
    },
    {
      id: 4,
      name: "김소빈",
      job: "operation",
    },
  ];

  // map 콜백함수를 사용한 배열 렌더링
  // >> 요소 개수의 변화 X
  //    : 전체 내용을 렌더링
  const listItems = people.map((person, index) => {
    // 배열을 렌더링하여 HTML 요소로 반환할 경우
    // : 각 요소를 구분할 수 있는 구분값을
    //   key 속성에 전달!
    return <li key={index}>{person}</li>;
  });

  // filter 콜백함수를 사용한 배열 렌더링
  const businessItems = peopleDescription.filter(
    (person) => person.job === "business"
  );
  // 필터링된 배열을 순회하여 UI로 반환된 businessItemsRender
  const businessItemsRender = businessItems.map((person) => (
    <li key={person.id}>{person.name}</li>
  ));

  return (
    <div>
      <h2>Map을 사용한 전체 리스트 렌더링</h2>
      <ul>{listItems}</ul>

      <h2>filter 사용한 필터링 배열 렌더링</h2>
      <ul>{businessItemsRender}</ul>
    </div>
  );
}