[React] 리액트 기초 배우기 #6 조건부 렌더링

 

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서  작성한 글입니다. 
원문 : https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

사이트를 제작하다보면 특정 조건에 따라  다른 컴포넌트를 보여주고 싶을 수 있습니다.

예를들어 로그인, 회원가입 버튼이 있습니다.

로그인을 하지 않은 상태에는 로그인 버튼이 보여져야하고, 로그인을 한 상태에서는 로그인 버튼이 사라지고 로그아웃 버튼이 렌더링 되어야 합니다.

리액트에서는 조건부 렌더링을 어떻게 하는지 알아보겠습니다.

App.js에 함수 컴포넌트로 LoginButton과 LogoutButton을 생성합니다.

//추가
function LoginButton() {
    return (
      <button>
          로그인
      </button>
    );
}
function LogoutButton() {
    return (
        <button>
            로그아웃
        </button>
);
}

UserButton이라는 함수 컴포넌트를 생성하고 조건에 따라 리턴하는 버튼을 다르게 만들어줍니다.

function UserButton(props) {
    if(props.isLoggedIn) {
        return <LogoutButton/>;
    }
    return <LoginButton/>;
}

전체 app.js의 내용은 이렇습니다.

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';


//추가
function LoginButton() {
    return (
      <button>
          로그인
      </button>
    );
}
function LogoutButton() {
    return (
        <button>
            로그아웃
        </button>
);
}
function UserButton(props) {
    if(props.isLoggedIn) {
        return <LogoutButton/>;
    }
    return <LoginButton/>;
}

function App() {

    return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <UserButton isLoggedIn={false}></UserButton>

            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
    );

}

export default App;

 

UserButton에 isLoggedIn 프로퍼티를 true로 전달하면 로그아웃 버튼이 렌더링됩니다.

엘리먼트 변수를 사용하는 방법

조건부 렌더링을 하는 방법은 여러가지입니다.

엘리먼트 변수를 사용해서 조건부 렌더링 하는 방법을 알아보겠습니다.

위에서 만든 로그인 로그아웃 컴포넌트를 그대로 사용합니다.

App()의 내용을 아래와 같이 수정합니다.

function App() {
    let Button;
    let isLoggedIn = false;
    if(isLoggedIn) {
        Button = <LogoutButton/>;
    }else{
        Button = <LoginButton/>;
    }
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                {Button}

                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );

}

첫 줄에서 Button이라는 변수를 선언하고 isLoggedIn이 true인지 false인지에 따라 Button이라는 변수에 Login, Logout버튼을 할당합니다.

그리고 return에서 {Button}이라고 작성하면 해당 변수가 가지고있는 엘리먼트를 렌더링 하게됩니다.

실제 사용할 때는 isLoggedIn은 state로 사용해야합니다.

인라인 구문으로 처리하기

위의 방법도 좋은 방법이지만, 짧고 간단하게 JSX에서 인라인으로 처리할 수 있습니다.

JSX안에서 중괄호를 사용하면 논리연산자 표현식을 사용할 수 있습니다.

condition ? true : false 인 삼항연산자를 이용하면 조건부 렌더링을 할 수 있습니다.

function App() {
    let isLoggedIn = false;
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                {
                    isLoggedIn ? <LogoutButton/> : <LoginButton/>
                }
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );

}

 

&& 연산자로 if의 조건도 표현할 수 있습니다.

function App() {
    let isLoggedIn = true;
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                {
                    isLoggedIn && <div>안녕하세요!</div>
                }
                {
                    isLoggedIn ? <LogoutButton/> : <LoginButton/>
                }
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );

}

컴포넌트 렌더링 막기

위험 안내 문구와 같이 특정 상황에만 렌더링 되어야 하는 컴포넌트는 return null을 이용해 렌더링 되지 않게 할 수 있습니다.

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}