Toggle: 중괄호{ } 안 if는 안되니, 삼항연산자를 이용하자.

Q. 버튼을 클릭시, 버튼 아래에 컴포넌트 Diary가 toggle이 되도록 바꾸어 보자.

import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="App">
      <button>show diary</button>
      // 다이어리 위치
    </div>
  );
}

function Diary(){
  return(
    <div className="diary">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
export default App;

A. 

1. 먼저 Diary의 상태를 변수로 담는다.

import React, { useState } from 'react';

let [diaryState, diaryStateFunc] = useState(false);

2. 삼항연산자를 이용하여, diary 상태에 따라 삽입여부를 결정하게 한다.

<button onClick={ ()=>{ diaryStateFunc( !diaryState ) } }>show diary</button>
{  diaryState ? <Diary /> : null  }

데이터 바인딩과 동일하게 html 구조 사이에 script를 삽입하고 싶을 때엔, 중괄호{ }를 이용하면 된다. 단, 중괄호 안에서의 if문은 인식하지 못하기 때문에 사용해서는 안된다.

여기서 null은, 일종의 JXS 관습으로, 아무것도 넣지 않길 희망할 때 사용하는 코드이다.

---

import React, { useState } from 'react';
import './App.scss';

function App() {

  let [diaryState, diaryStateFunc] = useState(false);

  return (
    <div className="App">
      <button onClick={ ()=>{ diaryStateFunc( !diaryState ) } }>show diary</button>
      {
        diaryState ? <Diary></Diary> : ''
      }
      
    </div>
  );
}

function Diary(){
  return(
    <div className="diary">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
export default App;