삼항연산자, 조건부 렌더링
1차 프로젝트에서 정말 많이 활용한 조건부 렌더링
- ProductsList.js 파일
return (
<div className="productsList">
<div className="headerTitle">
<Link to="/">
<img
src="/images/logo-darkgray.png"
alt="wesopLogo"
className="wesopLogo"
/>
</Link>
</div>
<div className="categoryTitle">
<h1 className="categoryTitleHeader"> 스킨 </h1>
</div>
<SubcatNav setCategoryId={setCategoryId} subcategory={subcategory} />
{categoryId ? (
<SubcatProductsList productsList={productsList} />
) : (
<SkinProductsList
setCategoryId={setCategoryId}
productsList={productsList}
/>
)}
- 상품 사이즈 별 조건부 렌더링
{detail.length === 1 ? (
<>
<span className="size">{detail[0].size} </span>
<span>/</span>
<span className="price">
<span> ₩ </span>
{(+detail[0].price).toLocaleString()}
</span>
</>
) : (
<div className="size">
<input
className="selectedButton"
type="radio"
name="size"
value={detail[0].size}
/>
<label className="selectedSize">{detail[0].size}</label>
<input
className="selectedButton"
type="radio"
name="size"
value={detail[1].size}
/>
<label className="selectedSize">{detail[1].size}</label>
</div>
)}
Author And Source
이 문제에 관하여(삼항연산자, 조건부 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@memoyoon/삼항연산자-조건부-렌더링저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)