TIL: React | [공식문서 읽기] 조건부 렌더링 - 221219

조건부 렌더링

React 에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다
애플리케이션 상태에 따라 특정 컴포넌트만 렌더링 할 수 있다

리액트에서의 조건부 렌더링은 자바스크립트에서의 조건 처리와 같이 동작한다
if나 삼항 연산자 같은 연산자를 사용할 수 있다

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

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

엘리먼트 변수

리액트 엘리먼트를 저장하기 위해 변수를 사용할 수 있다

    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

&&와 삼항 연산자를 통해 인라인으로 조건을 표현할 수도 있다

컴포넌트 렌더링 막기

경우에 따라 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있다
이런 경우에는 null을 반환하도록 한다

render 메소드에서 null을 반환하는 것은
생명주기 메소드에 영향을 주지 않는다
때문에 componentDidUpdate는 return 이후에도 호출된다