Conditional Rendering(조건부 랜더링) in React(리액트)

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다.

reactjs.org/docs/conditional-rendering.html의 내용을 바탕으로 재정리한다.

이하 자바스크립트는 Js라고 명칭 한다.

 

Recact에서는 필요한 동작을 캡슐화하는 component를 만들 수 있다.

//애플리케이션 state에 따라 일부만 렌더링 할 수 있다.

 

로그인으로 알아보는 조건부 랜더링

import React from "react";

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = { isLoggedIn: false };
  }

  handleLoginClick() {
    this.setState({ isLoggedIn: true });
  } //state를 변경 하는 함수

  handleLogoutClick() {
    this.setState({ isLoggedIn: false });
  } //state를 변경 하는 함수

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      //로그인 상태일 때 로그아웃 버튼 표시
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      //로그아웃 상태일 때 로그인 버튼 표시
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={undefined || isLoggedIn} />
        {button}
      </div>
    );//논리연산자를 이용하여 조건부 렌더를 할 수 있다.
  }
}

function UserGreeting() {
  return <h1>Welcome back!</h1>;
} //로그인 시 실행되는 함수

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
} //비회원일 시 실행되는 함수

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
} //로그인 판별하는 함수

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
} //로그인버튼

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
} //로그아웃버튼

export default LoginControl;

결과확인

변수를 이용하여 요소를 저장하면 나머지 출력은 변경되지 않고, 구성요소의 일부만 조건부로

랜더링 할 수 있게 된다.

위의 예제처럼 현재 상태에 따라 랜더링을 하게 만들 수도 있다.

위의 예제처럼 논리 연산자(&&, ||,!)를 이용하여 조건부 랜더링을 할 수 있다.

 

 

출처 : reactjs.org/docs/conditional-rendering.html

Conditional Rendering – React