[React] 컴포넌트 porps를 활용하여 버튼 클릭 시 사라지게 하기

오늘은 버튼 클릭 시 버튼요소가 사라지게 하는 코드를 짜볼것이다.

 

 

 

📘 방법 간단 설명

1. 버튼을 클릭하면 이벤트가 발생하여 useState로 지정한 visible의 상태값이 false로 변환한다.
2. Button 컴포넌트에 visible의 상태값이 props로 전달된다.
3. Button에서 visible이 false(숨김) 일 경우 className을 hide로 한다.
4. css로 className="hide" 는 display:none; 하여 요소를 없앤다.

---

1️⃣ Button 컴포넌트와  메인 컴포넌트를 준비한다.

MainHome.js

const MainHome = () => {
  return (
 	<Button clickEvt={() => onClickStart} visible={visible}></Button>
  );
};
export default MainHome;

 

Button.js

import styled from "styled-components";

const ButtonComp = styled.button`
  width: 400px;
  height: 150px;
  color: #fff;
  background-color: rgba(255, 200, 0);
  font-size: 60px;
  border-radius: 20px;
  border: 2px solid #fff;
  text-shadow: 2px 1px 10px black;
  cursor: pointer;
`;
const Button = () => {
  return (
    <ButtonComp>
      START !
    </ButtonComp>
  );
};
export default Button;

 

 

 

2️⃣ useState로 버튼 노출 여부에 대한 상태 값 생성

• 첫 화면에 들어갔을때 버튼은 보여야하므로 true로 초깃값 지정

MainHome.js

const [visible, setVisible] = useState(true);

 

 

3️⃣ 버튼 클릭 이벤트 함수 생성

• 클릭시 visible의 상태값을 not 을 통해 반대로 바꿔주도록 한다.

MainHome.js

const onClickStart = () => {
    setVisible(!visible);
  };

 

• Button 컴포넌트에 클릭 이벤트 함수 전달

<Button clickEvt={() => onClickStart}></Button>

 

 

4️⃣ Button 컴포넌트에서 상태 값에 따라 속성 지정

• props를 통하여 클릭 이벤트를 실행시킬 clickEvt 와 요소의 노출 여부를 지정할 visible을 전달 받는다.
• 삼항 연산자를 통해 visible이 true라면 show를 false라면 hide를 className에 삽입해준다.
• styled에서는 className 선택자를 사용하여 className이 hide라면 display:none; 속성을 지정해준다.

Button.js

const ButtonComp = styled.button`
  &.hide {
    display: none;
  }
`;

const Button = (props) => {
  const { clickEvt, visible } = props;
  return (
    <ButtonComp onClick={clickEvt()} className={visible ? "show" : "hide"}>
      START !
    </ButtonComp>
  );
};
export default Button;

 

 

✔️ 여기까지하면 끝이다 결과를 살펴보자