[React] React.js 튜토리얼 4- 조건부 렌더링

 

 

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

 

 

 

 

이전 포스팅을 보려면 아래 링크를 눌러주세요.

 

 

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 3- 이벤트 처리하기

 

 

 

 

 

 

이번에는 조건에 따른 렌더링에 대해 알아보겠습니다.

React에서의 조건부 렌더링은 자바스크립트와 동일합니다. if나 조건부 연산자를 통해 엘리먼트를 렌더링하게 됩니다.

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>
  )
}

 

 

그리고 로그인, 로그아웃버튼을 눌렀을 때 설정을 관리할 로그인컨트롤 클래스를 만들어 실행시킵니다.

 

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    // 로그인 확인 플래그
    this.state = {isLoggedIn: false};
  }

  //로그인버튼 클릭 시 true로
  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }
  //로그아웃버튼 클릭 시 false로
  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

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

    return (
      <div>
        {button}
      </div>
    );
  }
}

 

 

이번에는 && 연산자로 if를 표현해봅시다.

메일 개수가 0개 이상이면 메세지 개수를 알려주는 코드입니다.

if 연산자에서 unreadMessages.length가 0개가 아니라면 메세지개수를 조회할 수 있고,

메세지개수가 0개면, 사용자에게는 메세지 개수가 보여지지 않게 됩니다.

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

 

 

 

이번에는 if-else 구문을 인라인으로 표현해봅니다.

메일박스 컴포넌트에서 unrealMessages 개수가 0개 이상일 때와 0개일 때의 조건부 렌더링입니다.

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 ?
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
        : <h2>I have not received any emails.</h2>
      }
    </div>
  );
}

 

 

message를 아래와 같이 비어있는 리스트로 변경했을 때에는 I have not received any emails. 메세지가 뜨게 됩니다.

const messages = [];

 

 

 

만약 컴포넌트 자체를 숨기고 싶다면 null값을 리턴해주면 됩니다.

메세지 개수가 0개일 때 컴포넌트가 렌더링되지 않습니다.

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  // 아예 컴포넌트가 렌더링되지 않게 막기
  if (unreadMessages.length == 0){
    return null;
  }

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 ?
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
        : <h2>I have not received any emails.</h2>
      }
    </div>
  );
}

 

 

 

여기까지 조건부렌더링에 대해서 배워봤습니다.

참고한 React 문서 URL입니다.

https://ko.legacy.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React

 

 

 

다음에는 list와 key에 대해서 알아보도록하겠습니다.

[React] React.js 튜토리얼 5- list와 key

https://domdom.tistory.com/675

[React] React.js 튜토리얼 5- list와 key