리액트 7 - 조건부 렌더링

오늘 알아볼 것

• 조건부 렌더링

조건부 렌더링을 통해서 원하는 컴포넌트만 렌더링하여 재사용성을 높힐 수 있다.

하나의 모달 컴포넌트에서 조건에 따라 다른 컨텐츠 내용을 출력

삼항연산자를 이용한 렌더링

return (
    <>
      {!마지막라운드인지 ? (
        <>
          <DIV>
            <p>{버튼을누른거 ? "중간 결과" : "라운드 결과"}</p>
            {버튼을누른거 ? (
              <중간결과 컴포넌트 />
            ) : (
              <라운드결과 컴포넌트>
				{~~내용~~}
              </라운드결과 컴포넌트>
            )}
          </DIV>
          <Content> hi~ </Content>
        </>
      ) : (
        <DIV>
          <p>최종결과</p>
          <최종결과 컴포넌트 />
        </DIV>
      )}
      <Content>{마지막라운드인지 ? "게임이 종료 되었습니다!" : ""}</Content>
    </>
  );

스타일에 조건으로 렌더링하기

<span style = {{display : 조건 ? "display":"none" }}> Content </span>

중괄호 안에 표현식을 사용하여, 논리연산자를 통해 렌더링

 if (!조건) {
    return null;
  }