[React] 리액트 Hook : useState

지금 만들고 있는 페이지가 버튼을 클릭했을 때 페이지가 바뀌지 않고 처리할 것들이 많아서 useState를 이렇게나 많이 써버렸다...

사실 이 hook을 자유자재로 잘 쓰지는 못 했었는데 이번 기회에 아주 확실하게 익히게 되었다.

 

몇 가지 정리를 해보자면

 

1. styled-components을 이용해 스타일을 적용할 때 useState를 이용해 그 값을 바꾸고자 한다면 props로 넘겨주면 된다!

const Sticker_Img = styled.img`
  display: flex;
  width: ${(props) => props.size};
  height: ${(props) => props.size};
  margin: 2vw;
`;

  const [imgSize, setImgSize] = useState("37vh");
  
  const handleNicknameClick = () => {
    setImgSize("7vh");

  };

//<적용할 태그>
<Sticker_Img
    size={imgSize}
     //...//
            />

2.  버튼을 클릭했을 때 어떤 요소가 사라지거나/뜨게 하려면

 const [editclose, setEditClose] = useState(true);
 
 const handleNicknameClick = () => {
    setEditClose(false);
  };
  
  {editclose && (
          <StickerEditButton onClick={openModal}>스티커 수정</StickerEditButton>
        )}

이렇게 해주면 된다..!

처음에는 handle함수에서 setEditClose(!editclose)를 넣어줘었었는데 버튼을 누를 때마다 나타났다 사라졌다를 반복해서 (false)를 안에 넣어주었다.