React | onClick

🔎 제목을 클릭 했을 때, 게시물이 나타나는 모달창 만들기

리액트에서 동적 UI 만드는 순서

1. html과 css로 미리 UI 디자인 완성
2. UI의 현재 상태를 state로 저장
3. state에 따라서 UI가 어떻게 보일지 작성

JSX에서 조건문 쓰는 법

JSX 안에서는 if else 문법을 바로 사용할 수 없다
대신 삼항연산자로 사용 가능

조건식 ? 참일 때 결과값 : 거짓일 때 결과값

function App() {
  let [modal, setModal] = useState(false)

App 컴포넌트에 모달창의 상태를 나타낼 state를 만든다
닫힘: false, 열림: true인데 평소엔 보이지 않아야 하므로 false로 기본값 설정

function Modal() {
  return (
    <div className='modal'>
          <h4>제목</h4>
          <p>날짜</p>
          <p>상세내용</p>
      </div>
  )
}

App 컴포넌트에 html 코드를 짠 다음에 그 코드를 별도의 컴포넌트로빼준다

<div className='list'>
        <h4 onClick={() => {setModal(!modal)}}>{글제목[2]}</h4>
        <p>4월 14일 발행</p>
      </div>
      {
        modal === true ? <Modal /> : null
// html 내부에 js문법을 쓸 때, 중괄호 내부에 작성
// modal이 true이면 Modal 컴포넌트를 보이고, false이면 null값(아무것도 없음)
      }

App 컴포넌트의 return문 내부에 onClick 함수를 넣어주고, setModal 함수가 modal과 같지 않게!
(기본값 false니까 true로)

그리고 onclick하면 상태가 true로 바뀌니까 또 누르면 그 반대인 false가 되면서 닫힌다