[React] useState 조건부 렌더링

조건부 렌더링 사용하기를 간단하게 해 보았당 :) 

 

 

 

구현해야 하는 것 

 

더보기 클릭 전

더보기 클릭 후

 

 

 

const Review = () => {
  const [open, setOpen] = useState(false);
  const reviewOpen = () => {
    setOpen(!open);
  };

useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다.

 

 <div className="reviewTitle">배송도 빠르고 정말 좋아요.</div>
      <div className="reviewMain">
        {!open ? (
          ""
        ) : (
          <div className="reviewMainContents">
            주문한지 하루만에 배송이 도착해서 너무 좋았습니다.
            <br />
            다음에도 필요하면 또 여기서 시킬 것 같아요.
          </div>
        )}

        <span className="reviewMainHandler" onClick={reviewOpen}>
          더보기 ▼
        </span>
      </div>
    </div>

삼항 연산자를 이용하였다.

 

 

!open ? 일때 

ture  이면 " " ( 빈 문자열)을 반환,

 

false 이면 

(
          <div className="reviewMainContents">
            주문한지 하루만에 배송이 도착해서 너무 좋았습니다.
            <br />
            다음에도 필요하면 또 여기서 시킬 것 같아요.
          </div>
        )

 

위 내용이 들어갈 수 있도록 대입해 주었다. 

 

 

 

 

조건부 렌더링 성공성공!