[React] 리액트 조건부 렌더링 (if-else) 사용하기

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다.

 

이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.

class Control extends React.Component {
  constructor(props) {
    super(props);
    // 초기값을 설정해 줍니다.
    this.state = {
      isIn: false,
    };
  }
  handleInClick = () => {
  	//setState를 사용하여 값을 변경해 줍니다.
    this.setState({isIn: true});
  }
  handleOutClick = () => {
  	//setState를 사용하여 값을 변경해 줍니다.
    this.setState({isIn: false});
  }
  render() {
  	// state의 값을 변수에 저장한뒤 체크합니다
    const isIn = this.state.isIn;
    let text;
    // 체크한 결과에 따라 캡슐화된 값이 지정됩니다.
    if (isIn) {
      text = <p>이것은 IN 되었습니다.</p>;
    } else {
      text = <p>이것은 OUT 되었습니다.</p>;
    }
    return (
      <div>
      	// 캡슐화된 값을 뿌려줍니다(렌더)
        {text}
      </div>
    );
  }
}

이렇게 사용할 수 있습니다.