JSX 조건문

삼원 표현식

const Test = function(props) {
  const { flag1, flag2 } = props
  return (
    

      {flag1 && flag2
        ? 
11111
        : 
22222
      }
    
  )
}

지금 실행 함수

const Test = function(props) {
  const { flag1, flag2 } = props
  return (
    

      {
        (() => {
          if (flag1 && flag2) {
            return 
11111
          } else {
            return 
22222
          }
        })()
      }
    
  )
}

조건문

const Test = function(props) {
  const { flag1, flag2 } = props
  const condition = flag1 && flag2
  if (condition) return 
111111
  if (!condition) return 
222222
  return 
333333
}

do 표현식(stage0 새 제안)

const Test = function(props) {
  const { flag1, flag2 } = props
  return (
    

      {
        do {
          if (flag1 && flag2) {
            
11111
          } else {
            
22222
          }
        }
      }
    
  )
}

setState() 비동기식

class TestComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  componentDidMount() {
      this.setState({count: this.state.count + 1})
      console.log(this.state.count) // 0 state  

      this.setState({count: this.state.count + 1})
      console.log(this.state.count) // 0 state  

      setTimeout(() => {
        console.log(this.state.count) // 1 state  ,  

        this.setState({count: this.state.count + 1})
        console.log(this.state.count) // 2 state  
        
        this.setState({count: this.state.count + 1})
        console.log(this.state.count) // 3 state  
      })
  }
}

class TestComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  componentDidMount() {
    document.getElementById('button1').addEventListener('click', this.onClickHandler1);

    setTimeout(this.onTimeoutHandler, 10000);

    fetch('https://api.github.com/users')
      .then(this.onAjaxCallback);
  }

  onClickHandler1 = () => {
    console.log('State before (onClickHandler1): ' + JSON.stringify(this.state));
    this.setState({
      count: this.state.count + 1
    });
    console.log('State after (onClickHandler1): ' + JSON.stringify(this.state));
  }

  onClickHandler2 = () => {
    console.log('State before (onClickHandler2): ' + JSON.stringify(this.state));
    this.setState({
      count: this.state.count + 2
    });
    console.log('State after (onClickHandler2): ' + JSON.stringify(this.state));
  }

  onTimeoutHandler = () => {
    console.log('State before (timeout): ' + JSON.stringify(this.state));
    this.setState({
      count: this.state.count + 3
    });
    console.log('State after (timeout): ' + JSON.stringify(this.state));
  }

  onAjaxCallback = (err, res) => {
    console.log('State before (AJAX call): ' + JSON.stringify(this.state));
    this.setState({
      count: this.state.count + 4
    });
    console.log('State after (AJAX call): ' + JSON.stringify(this.state));
  }

  render() {
    console.log('State in render: ' + JSON.stringify(this.state));

    return (
      

        
          'addEventListener'
        

        
          'props bind in jsx'
        
      
    );
  }
}