조건부 렌더링

React에서 원하는 동작을 수행하는 캡슐화된 별개의 컴포넌트를 생성할 수 있습니다. 그리고 나서, 어플리케이션의 state에 의존하여 그 중 일부만 렌더링시키는 것도 가능합니다.

class Detail extends React.Component {
     constructor(props){
     super(props);
      this.state ={  
        search:false
      };
     }
      
     SearchandleClick = () => {
       this.setState({
         search: !this.state.search
       });
     };
   
     render (){
       return (
         <div className="One">
           <div className="Nav">
           <div className="Nav_topwrap">
           {this.state.search && <div className="tc">개발 웹개발자 서버 개발자</div>}

논리 연산자를 이용한 조건으로 && expression
조건이 true일 경우에는 && 이후에 위치한 expression을 반환하고, false일 경우 무시

삼항연자자를 이용한 조건

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}