조건부 렌더링

조건부 렌더링은 애플리케이션의 상태에 맞춰 보여주어야 하는 몇개의 컴포넌트만을 렌더링하여 화면에 그려주는 것이다.

예를 들어 로그인이 되어있을 때와 로그인이 되어있지 않은 상태에 맞춰 다른 컴포넌트를 렌더링하여 다른 화면을 보여준다.

if문을 사용한 조건부 렌더링

로그인 상태가 ture인 경우 UserGreeting 컴포넌트를 렌더링하고, 로그인 상태가 false인 경우 GuestGreeting 컴포넌트를 렌더링 하여 상태에 맞는 UI를 그려낸다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

condition ? true: false를 사용한 조건부 렌더링

isEdit이 true인 경우 수정 기능을 하는 버튼이 동작되고 버튼이 수정버튼으로 나타나도록하고 false인 경우 등록 기능을 하는 버튼이 동작되고 버튼이 등록 버튼으로 나타나도록 삼항연산자(condition ? true: false)를 사용해 상태에 맞는 화면과 기능을 구현한다.

<Enroll onClick={props.isEdit ? props.onClickUpdate :props.onClickSubmit}>{props.isEdit ? "수정": "등록"}하기</Enroll>

삼항 연산자 사용 예시

let a = 10
let b = 20

a>b?console.log("a가 b보다 크다"):console.log("a가 b보다 작다.")

//'a가 b보다 작다.'

&& 를 사용한 조건부 렌더링

&& 패턴의 경우 선행 조건이 먼저 만족해야 후행조건을 평가하고 후행조건에 대한 결과를 반환한다.

  function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return(
      <>
        isLoggedIn && <UserGreeting />
      </>
   	 )
    }

&& 연산자 사용 예시

true && 'hello'
//'hello'

false && 'hello'
//false

옵셔널 체이닝(?.)을 이용한 조건부 렌더링

옵셔널 체이닝은 이전 문법보다 간결하고 가장 최신에 나온 문법이다.
조건에 맞는 데이터가 있으면 렌더링 하고 없으면 undefined를 리턴한다.

data?.fetchProfile

데이터가 없을 때 undefined를 리턴하고 데이터가 들어올때까지 기다리는 것이 아니라 데이터가 들어오면 그때 다시 재렌더링되어 조건이 만족하게 되고 데이터가 렌더링 되는 것이다.

참고자료 https://ko.reactjs.org/docs/conditional-rendering.html