[React] 클릭시 요소 표시/숨기기

학습일 : 2023. 03. 17

---

클릭시 요소 표시 또는 숨기기를 위해선

클릭시

반댓값을 리턴해주는 구문을 작성해주어야 한다.

---

 

우선 해야할 것은

<App.js>

0. useState를 작성. default 값을 false로 둠

1. 클릭시 반댓값을 리턴하는 onClick 을 정의하고

2. showing 이 참일 때 버튼의 text가 Hide, 거짓일 때 버튼의 text가 Show로 변환되도록 정의

 

import { useState } from "react";

function Hello() {
  return <h1>안녕?</h1>;
}

function App() {
  const [showing, setShowing] = useState(false); // default 값은 false
  const onClick = () => setShowing((prev) => !prev); // 클릭시 반댓값을 리턴

  return (
    <div>
      {/* js를 쓸때는 중괄호! */}
      {/* showing이 참일 때 <Hello />를 반환, 아닐 때는 null */}
      {showing ? <Hello /> : null}
      {/* 버튼 - showing이 참일때 Hide, 아닐때 Show 로 텍스트가 변환 */}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

 

실행결과

 

 

 

 

 

리액트로 구현 완

이걸 응용하면 충분히 더 대단할 걸 구현해볼 수 있겠지?