리액트 제어문

if문

리액트 중괄호 내에서 if문을 사용할 수 없으므로 if문 대용 역할을 할 수 있는 삼항연산자를 사용해야한다.

삼항연산자를 사용해서 제목을 클릭하면 모달이 보이도록 해보자.

1. 모달창의 상태정보를 저장하는 state를 만들었다.

function App (){

  let [modal, modal변경] = useState(false);
  return (
 		...
      )
}

2. 모달의 상태가 true인 경우에만 모달창이 나타나도록 삼항연산자 사용

function App (){

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

3. 모달을 열고 닫을 버튼 생성.

function App (){

  let [modal, modal변경] = useState(false);
  return (
    <div>
  		...
    <button onClick= {()=> {modal변경(!modal)} } > 열기</button>
      { 
         modal === true 
         ? <Modal />
         : null
      }
    </div>
  )
}

사본을 만들지 않은 이유
사본만드는건 reference 자료형들만 하면된다. (array, object)
문자, 숫자, true/false는 직접 수정이 가능하다.