[React] useState(클릭이벤트, 팝업)

앞의 Event부분은 클릭할 때마다 Box의 배경색이 바뀌는 것이 아니라 일회성으로 한 번 클릭했을 때에 색이 바뀌는 것만 가능했다면, 이번에는 조건문을 사용해서 클릭할 때마다 색이 바뀌도록 해줄 것이다.

*클릭할 때마다 배경색 바꾸기

우선 useState를 하나 더 추가해주고, 이 값의 조건에 따라 색이 바뀌도록 만들어준다.

이제 이 isClick을 이용하여 if문을 사용할 것인데,
changeClick 내부에서 참, 거짓값으로 bgColor의 색을 바꿔줄 것이다.

isClick이 true인 경우에는 색을 gold로 바꾸고 값을 false로, 반대로 isClick이 false인 경우에는 색을 teal로 바꾸고 값을 true로 돌려주면 스위치처럼 색을 클릭할 때마다 바꿔줄 수 있다.

*팝업창

우선 클릭을 위한 박스 하나와 팝업창, 팝업창 안의 x버튼을 만들어준다.

export const PopEx = () => {
    return <div>
        <Box>
            클릭 해 주세요!
        </Box>

        <PopUp>
            <CloseBtn>X</CloseBtn>
        </PopUp>
    </div>
}

스타일은 아래처럼 작성해주었다.

const Box = styled.div`
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 38px;
  background-color: gray;
`;

const PopUp = styled.div`
  width: 300px;
  height: 300px;
  background-color: lightcoral;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
`;

const CloseBtn = styled.div`
  font-size: 30px;
  font-weight: 900;
  float: right;
  margin: 20px;
  cursor: pointer;
`;

여기서 PopUp에 display:none을 주며 클릭을 하지 않았을 때에는 보이지 않도록 처리해주었다.
클릭했을 때에 display를 block처리하여 보여주게 할 것이다.

그럼 우선 Box에 click이벤트를 걸어준다.

그리고 PopUp으로 가서 display부분에 props사용을 위한 작업을 해준다.

그럼 이제 클릭이벤트를 이용하여 state값을 변경되게 해주면 된다!

해당 show를 PopUp의 disp값에 넣어준다.

그럼 이제 클릭했을 때에 setShow의 값만 "block"으로 바꿔주면 박스를 클릭했을 때에 팝업창이 뜨도록 할 수 있다.

팝업이 떴을 때에 close버튼을 누르면 팝업이 다시 display:none이 되게 만들어주면 된다.

끝!!