8. React / 리액트 (조건부 렌더링)

JSX 내부에서는 if문을 사용할 수 없음 

그렇다면 어떻게 조건문을 사용할 수 있을까??

{ } 안에 연산자를 사용하면됨 ㅎ

매우매우 간단함

state 가 true 일 때 참입니다.

login 이 false 일 때 로그인을 하세요

&& 를 사용할 수 도 있다. true 면 보여주고 그렇지 않으면 렌더링 해도 보여주지 않는다

import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
 
    const myname = '왕초보코딩탈출';
 
    const state = true;
 
    const login = false;
 
    const display = true;
    
    return (
    <div>
      <h6>안녕하세요 나의 이름은 {myname} 입니다.</h6>
      <h6>잘 부탁드립니다.~~~</h6>
 
      <h2>
      {
        state ? '참 입니다.' : '거짓 입니다.'
      }
      </h2>
      <h2>
      {
        login ? '로그인 되었습니다..' : '로그인을 하세요'
      }
      </h2>
      <h2>
      {
        display && '아하하하하' 
      }
      </h2>
 
    </div>
    );
  }
}
 
export default App;
 
 

로그인했을 때와 안했을 때 화면을 다르게 하거나 권한별로 페이지를 다르게 보여주거나 뭐 그럴때 써봐야겠다.~

리액트가 처음엔 어려웠으나 어찌보면 좀 쉬운것 같기도하네요 아닌가?ㅎㅎㅎㅎ여튼 열심히해봐야겠다

평일엔 ㅠㅠ 기초를 좀 다지고 주말에 속도를 내야겠다 ㅠㅠ