[JavaScript] 간단한 보이기, 숨기기 기능 구현

 

간단하게 state를 사용해서 보이기, 숨기기 기능을 만들어 볼거다.

 

 

 

초기 구성

 

컴포넌트를 생성하여 단순하게 버튼과 내용을 만들었다.

const TestShowHide = () => {
  const css = {
    width: 100,
    height: 90,
    backgroundColor: 'tomato',
    margin: 20,
  };

  return (
    <>
      <p>
        <button>보이기</button>      
      </p>
      <hr />
      <div style={css}>내용</div>
    </>
  );
};

export default TestShowHide;

 

---

 

보이기

 

이제 상태에 따라 보여주기 기능을 만들 것이다.

 

처음 시작할 때 내용을 숨겨주고,

보이기 버튼을 클릭하면 내용이 나오도록 할거다.

import React, { useState } from "react";

const TestShowHide = () => {
  const [isShow, setIsshow] = useState(false);

  const css = {
    width: 100,
    height: 90,
    backgroundColor: "tomato",
    margin: 20,
  };

  const onShow = () => {
    setIsshow(true);
  };

  return (
    <>
      <p>
        <button onClick={onShow}>보이기</button>
      </p>
      {isShow === true ? <div style={css}>내용</div> : null}
    </>
  );
};

export default TestShowHide;

 

결과

'보이기'를  클릭하면 그림과 같이 나온다

 

 

삼항연산자로 보이기 버튼이 true이면 <div>내용을 보여줄 것이고 아니면 null 로 처리하였다.

 

 

---

 

숨기기

 

여기에 덧붙여서 숨기기 기능도 만들어 보려고 한다.

보이기 구현 방법과 반대로 생각하면 된다.

 

import React, { useState } from "react";

const TestShowHide = () => {
  const [isShow, setIsshow] = useState(false);

  const css = {
    width: 100,
    height: 90,
    backgroundColor: "tomato",
    margin: 20,
  };

  const onShow = () => {
    setIsshow(true);
  };
  const onHide = () => {
    setIsshow(false);
  };

  return (
    <>
      <p>
        <button onClick={onShow}>보이기</button>
        <button onClick={onHide}>숨기기</button>
      </p>
      {isShow === true ? <div style={css}>내용</div> : null}
    </>
  );
};

export default TestShowHide;

 

결과

이 상태에서 '숨기기' 버튼을 누르면 내용이 사라진다.