조건부 렌더링 (row.js)

📍삼항 연산자 이용

{condition ? <ComponentA /> : <ComponentB />}

• condition이 true이면 <ComponentA />를 렌더링하고, 그렇지 않으면 <ComponentB />를 렌더링합니다.

 

 

 

📍논리 연산자 이용 

{showComponent && <Component />}

 

• showComponent가 true이면 <Component />를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않습니다.

 {setModalOpen &&  (
      <MovieModal
      {...movieSelected}
      setModalOpen = {setModalOpen}
      />
      )}

- setModalopen이 true 일 때 MovieModal 컴포넌트 실행 

 

📍조건부 렌더링과 함께 매핑 함수 이용

{items.map(item => condition(item) && <Component key={item.id} item={item} />)}

• items 배열을 매핑하면서 condition(item)이 true인 경우에만 <Component>를 렌더링합니다.
• 각각의 <Component>는 item 객체를 item 프로퍼티로 전달받습니다.

 

 

ex) 

const items = [
  { id: 1, name: 'Apple', price: 1.99 },
  { id: 2, name: 'Banana', price: 0.99 },
  { id: 3, name: 'Orange', price: 2.49 },
];

 

const condition = (item) => item.price > 2;

위의 condition 함수는 item의 price가 2보다 큰 경우에만 true를 반환합니다.

{items.map(item => condition(item) && <Component key={item.id} item={item} />)}

위의 코드는 items 배열을 매핑하면서 각 항목에 대해 condition(item)을 확인합니다. condition(item)이 true인 경우에만 <Component>가 렌더링되고, item 객체가 item 프로퍼티로 전달됩니다. key는 각 항목의 고유한 식별자로 사용됩니다.

📍조건에 따른 클래스 지정

<div className={`box ${isActive ? 'active' : ''}`}>
  Content
</div>