1. jsx 조건문

[삼항연산자]

• jsx는 변수나 함수를 사용하려면 중괄호 안에 넣어서 실행한다고 했으나 아쉽게도 중괄호 내에 있는 if문은 인식이 되지 않아 간단한 경우에는 보통 삼항 연산자를 사용한다.

  • ex) 클릭시 ui가 보이고, 다시 클릭하면 ui가 사라지도록 한다.

    1. UI가 보이는/보이지않는 상태정보를 state로 만들어둔다.

    function App (){
    	let [modal, modal변경] = useState(false);
      return ()
    }
    

    • 참조형이 아닌 기본형일 때는 복사본을 만들 필요가 없다.

    2. state가 true일 때만 UI를 보여주도록 삼항 연산자를 작성한다.

    • modal 컴포넌트를 띄우고 싶은 위치에 삼항 연산자를 사용한다.

    function App (){
    
      let [modal, modal변경] = useState(false);
      return (
        <div>
    			{
             modal === true
             ? <Modal />
             : null
          }
        </div>
      )
    }
    

    3. 버튼을 클릭했을 때 모달창이 보이도록 <onClick>을 달아준다.

    function App (){
    
      let [modal, modal변경] = useState(false);
      return (
        <div>
          HTML 잔뜩있는 곳
          <button onClick={ ()=>{ modal변경(true) } }> 열기 </button>
          {
             modal === true
             ? <Modal />
             : null
          }
        </div>
      )
    }
    

    [열고 닫는 기능]

    <button onClick={ ()=>{ modal변경(!modal) } }> 버튼 </button>
    

[if문]

• ex) 몇번째 탭을 클릭했는 지에 따라 다른 div를 보여준다.

  1. UI 상태정보를 state로 만들어둔다.

  function Detail(){
  
    let [modal, modal변경] = useState(0);
    return (
      <div>
         <Nav.Link eventKey="link-0" onClick={()=>{ modal변경(0) }}>Active</Nav.Link>
  			 <Nav.Link eventKey="link-1" onClick={()=>{ modal변경(1) }}>Option 2</Nav.Link>
  			 <Nav.Link eventKey="link-1" onClick={()=>{ modal변경(2) }}>Option 3</Nav.Link>
  		</div>
    )
  }
  

  • modal값을 조건으로 사용할 것이다.

  1. 함수에 조건문을 달아준다.

     function TabContent(){
       if (props.modal=== 0){
         return <div>내용0</div>
       } else if (props.modal=== 1){
         return <div>내용1</div>
       } else if (props.modal=== 2){
         return <div>내용2</div>
       }
     }
     

     • if문의 조건값에 따라 div를 다르게 보여준다.

  2. 함수를 보여준다.

     function Detail(){
     
       let [modal, modal변경] = useState(0);
       return (
         <div>
          <Nav.Link eventKey="link-0" onClick={()=>{ modal변경(0) }}>Active</Nav.Link>
     		 <Nav.Link eventKey="link-1" onClick={()=>{ modal변경(1) }}>Option 2</Nav.Link>
     		 <Nav.Link eventKey="link-1" onClick={()=>{ modal변경(2) }}>Option 3</Nav.Link>
          <TabContent modal={modal} />
     		</div>
       )
     }
     

     • <TabContent modal={modal} /> 을 통해 만들어 둔 함수를 보여준다.

[if문 작성패턴 5개]

[패턴 1] 컴포넌트 안에서 쓰는 if/else

function Component() {
  if (true) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
}

• return () 안의 JSX 내에서는 사용 불가능하다.

• (참고)

  function Component() {
    if ( true ) {
      return <p>참이면 보여줄 HTML</p>;
    }
    return null;
  }
  

[패턴 2] JSX안에서 쓰는 삼항연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

[패턴 3] && 연산자로 if 역할 대신하기

• && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣을 수 있다.