모달변경하기(UI state로 관리해보기)

1.state에는 데이터 뿐만 아니라 UI상태도 저장해서 사용한다.

display: none block의 경우도 state 상태관리로 금방 만들수가 있다

2.jsx 안에서 if 문작성하려면 {삼항다항식} 을 사용한다. 삼항다항식에서 state의 조건을 변경시켜 UI를 조작하고,

원하는 태그에 적용시킬수 있음

 

[...]
  let [모달, 모달변경] = useState(false);
  return (
    <div className="main">
      <h1>따봉만들기실습</h1>
      {모달 === true ? <Modal /> : null}
      <ul>
        <li>
          <h2>
            {글제목[0]}
            <span class="good" onClick={() => 따봉변경(따봉 + 1)}>
              ✌{따봉}
            </span>
          </h2>
          <button onClick={제목바꾸기}>버튼</button>
          <hr />
        </li>
        <li>
          <h2>
            {글제목[1]}
            <span class="good" onClick={() => 따봉변경(따봉 + 1)}>
              ✌{따봉}
            </span>
          </h2>
          <button
            onClick={() => {
              모달변경(true);
            }}
          >
            모달보이기
          </button>
          <hr />
        </li>
        <li>
          <h2>
            {글제목[2]}
            <span class="good" onClick={() => 따봉변경(따봉 + 1)}>
              ✌{따봉}
            </span>
          </h2>
          <hr />
        </li>
      </ul>
    </div>
  );
};
function Modal() {
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>내용입니다.</p>
    </div>
  );
}
export default DDABONG;