[React Docs 번역] Conditional Rendering

김승엽

Published in

Berkbach

4 min readApr 17, 2020

🗂 목차

🚦 조건부 렌더링

React에서는 원하는 동작이 캡슐화된 특정 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만 렌더링 할 수 있습니다. React의 조건부 렌더링은 JS의 조건 처리와 같은 방법으로 작동합니다. JS의 if 나 삼항 조건 연산자 를 현재 상태에 맞는 element를 생성할 때 사용하면 됩니다. 그러면 React가 그들에 맞춰서 UI를 업데이트를 합니다.

유저의 로그인 유무에 따라서 두개의 컴포넌트 중 하나만 보여주는 Greeting 컴포넌트를 만들겠습니다.

🏷️ Element 변수

element를 저장하기 위해 변수를 사용할 수 있습니다. 또한 출력의 남은 부분은 변하지 않고 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. 로그아웃과 로그인을 나타내는 두 컴포넌트가 있습니다.

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

아래 예제에서는 상태를 가진 LoginControl 컴포넌트를 만들겠습니다. 이 컴포넌트는 현재 상태에 따라 <LoginButton /> 또는 <LogoutButton /> 를 렌더링 합니다. 그리고 전 예제인 <Greeting /> 또한 렌더링 합니다.

변수를 선언하고 if 사용해서 조건부로 렌더링 하는 것도 좋지만, 때때로 더 짧은 문법을 사용하고 싶을 때가 있을 수 있습니다. JSX 안에서 조건을 처리하는 방법 인라인(inline) 이 몇 가지 있습니다.

&& 논리 연산자로 If를 인라인으로 표현하기

JSX 안에서 중괄호를 사용하면 정규식을 작성할 수 있습니다. JS의 && 연산자 를 사용하면 쉽게 조건을 처리할 수 있습니다.

이것은 JS이기 때문에 작동합니다. true && expression 은 항상 expression 으로 연산 하고, false && expression 은 항상 false 로 연산됩니다. 그러므로 만약 조건이 true 이면 &&의 오른 쪽 값이 출력 되고, false 일 경우는 React가 삭제하고 넘깁니다.

If-Else 문을 인라인으로 표현하기

또 다른 인라인으로 조건부 렌더링하는 방법은 JS의 삼항 조건 연산자 (condition ? true : false) 를 사용하는 것 입니다.

JS 처럼 가독성이 좋다고 생각되는 방식으로 선택하면 됩니다. 또한 조건문이 복잡해진다면 컴포넌트를 분리 하는 것도 좋은 방법이라는 것을 기억하세요.

컴포넌트가 렌더링 하는 것을 막기

가끔 다른 컴포넌트에 의해 렌더링이 되지만 컴포넌트 자체를 숨기고 싶은 경우가 생깁니다. 이럴 때는 출력 값 대신 null 을 리턴해주면 됩니다. 아래 <WarningBanner /> 컴포넌트는 warn 이라는 props 값에 따라서 렌더링 됩니다. props가 false 일 경우 컴포넌트는 렌더링이 되지 않습니다.

컴포넌트의 render 메소드로 null 을 리턴하는 것은 컴포넌트의 lifecycle 메소드 호출에 영향을 미치지 않습니다. 그 예로 componentDidUpdate 는 계속해서 호출되게 됩니다.

📚 정리 및 참고 자료

조건문을 사용하면 조건에 따라 다른 컴포넌트를 렌더링할 수 있습니다.
컴포넌트를 숨기고 싶을 때는 element 대신 null 을 리턴하면 됩니다.
render 메소드에서 null 을 리턴하는것은 lifecycle 에게 영향이 미치지 않습니다.