조건부 렌더링

</>·2022년 4월 2일

React

리액트 공식문서 톺아보기

목록 보기

7/9

목표

조건부 렌더링에 대해 알아보기

7. 조건부 렌더링

리액트는 조건부 렌더링에 대해 다음과 같이 설명한다.

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.

아래 두 개의 컴포넌트가 있다고 가정해보자.

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

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

이 두 개의 컴포넌트 중 사용자의 로그인 상태에 따라 다르게 렌더링하려면 다음과 같다.

function Greeting({ isLogin }) {
  if (isLogin) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

export default function App() {
  const isLogin = false;
  return (
    <div className="App">
      <Greeting />
    </div>
  );
}

전달 받은 props인 isLogin이 true이면 UserGreeting 컴포넌트를 false이면 GuestGreeting 컴포넌트를 렌더링한다.
위 코드에서는 isLogin을 false로 설정했기 때문에 GuestGreeting을 렌더링한다.

7-1. 엘리먼트 변수

엘리먼트를 변수에 저장해 출력의 다른 부분은 변하지 않은 채 컴포넌트의 일부를 조건부로 렌더링 할 수 있다.

function Greeting({ isLogin }) {
  let button;
  if (isLogin) {
    button = <LogoutButton onClick={this.logout} />;
  } else {
    button = <LoginButton onClick={this.login} />;
  }
  
  return (
    <div>
      <Main isLogin={isLogin} />
      {button}
    </div>
  )
}

출력 부분인 { button } 은 변하지 않은 채 isLogin의 값에 따라 조건부로 렌더링할 수 있다.

7-2. 논리 && 연산자 활용하기

JSX 안에는 중괄호를 이용해 표현식을 포함할 수 있는데 논리 연산자인 && 를 사용하면 인라인으로 엘리먼트를 조건부로 넣을 수 있다.

function User({ name }) {
  return <h1>{name && `${name}님`} 반갑습니다.</h1>;
}

function Guest() {
  return <h1>어서오세요. 회원이시라면 로그인해주세요.</h1>;
}

function Greeting({ isLogin }) {
  const name = "James";
  return <div>{isLogin ? <User name={name} /> : <Guest />}</div>;
}

export default function Condition() {
  const isLogin = true;
  return (
    <div>
      <Greeting isLogin={isLogin} />
    </div>
  );
}

User 컴포넌트에서 논리 연산자 &&를 활용해 props로 받은 name이 존재하면 "${name}님 반갑습니다." 를 출력한다.
name이 존재하지 않는다면 "반갑습니다." 만 출력된다.

7-2-1. 논리 && 연산자

true && 표현식은 항상 expression으로 평가된다.
false && 표현식은 항상 false로 평가된다.
따라서, 조건이 true 일 때만 뒤의 표현식이 출력된다.

7-2-2. 주의할 점

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

값이 0이면 falsy로 평가되는데 이는 뒤에 있는 표현식은 건너뛰지만 falsy 표현식은 반환된다.
따라서, 위의 예에서는 다음과 같이 반환되어 0이 표시된다.

<div>0</div>

7-3. 삼항연산자 활용하기

function User({ name }) {
  return <h1>{name && `${name}님`} 반갑습니다.</h1>;
}

function Guest() {
  return <h1>어서오세요. 회원이시라면 로그인해주세요.</h1>;
}

function Greeting({ isLogin }) {
  const name = "James";
  return <div>{isLogin ? <User name={name} /> : <Guest />}</div>;
}

export default function Condition() {
  const isLogin = true;
  return (
    <div>
      <Greeting isLogin={isLogin} />
    </div>
  );
}

Greeting 컴포넌트에서 삼항연산자를 사용해서 isLogin이 true이면 User 컴포넌트를 false이면 Guest 컴포넌트를 렌더링 한다.

7-4. 렌더링 막기

컴포넌트를 렌더링하고 싶지 않을 때에는 렌더링 결과를 출력하는 대신 null을 반환하여 렌더링을 막을 수 있다.

function Count({ count }) {
  return <h2>{count}번째 방문입니다.</h2>;
}

function User({ name }) {
  const count = 1;
  return (
    <div>
      <h1>{name && `${name}님`} 반갑습니다.</h1>
      {count !== 0 ? <Count count={count} /> : null}
    </div>
  );
}