REACT useState로 토글 기능 버튼을 만들어보자

useState를 사용한 간단한 예제 2가지를 살펴보자!

📒 구독버튼 만들기

처음에는 구독하기 상태였다가, 클릭하면 구독중으로 변하고, 구독중을 누르면 다시 구독이 취소되는 모습의 버튼을 만들어보자.

먼저 파일 상단에

import { useState } from "react"

를 작성하여 useState Hook을 사용할 준비를 하자.

그리고 함수 내부에 const [sub, setSub] = useState(false); 라고 작성한다.

초기값을 false로 설정하였다.

이제 이벤트 핸들러를 만들어주자

버튼을 클릭했을 때, sub의 값이 ture로 바뀌는 기능의 핸들러이다.

현재 sub의 값이 false이므로 !sub 는 false의 반대인 true가 되겠지?

버튼을 누를때마다 값이 true, flase값이 번갈아가면서 나올 수 있게 됐다!

마지막으로 sub의 값에 따라 버튼 글씨를 어떻게 렌더링 할지 작성해주자.

삼항연산자를 사용하여 {sub ? '구독중' : '구독하기'} 라고 작성하면 완성이다!

(sub가 true면 '구독중', false면 '구독하기'가 출력된다.)

🔽 완성된 코드:

function App() {
  const [sub, setSub] = useState(false);

  function handelClick() {
    setSub(!sub)
  }

  return (
    <>
      <h1>Subscribe button</h1>
      <button onClick={handelClick}>{sub ? '구독중' : '구독하기'}</button>
    </>
  )
}

🔽 결과:

---

📒 좋아요 버튼 만들기

이번엔 useState의 값이 변함에 따라 스타일 값도 변할 수 있도록 응용해 보자!

첫번째 예제와 비슷하게 useState값을 누를 때마다 ture, false로 바뀌게 만들어주었다.

값에 따라 svg path의 fill 색상 값이 변경 될 수 있도록 하자~

이번엔 && 연산자를 사용해 보았다

사용법은 아래와 같다.

&& 연산자
표현식1이 참일경우 표현식2를 출력한다
표현식1이 거짓일 경우 출력하지 않는다

style 애트리뷰트에 fill: liked && '#00f'라고 작성하면,

liked가 ture일때 fill값이 #00f가 되고, 아니면 #00f가 취소 되어 기본색인 검정색으로 나온다.

🔽 완성된 코드:

function Snippet() {
  const [liked, setLiked] = useState(false);

  return (
    <>
      <h1>좋아요 버튼</h1>
      <svg
        style={{ width: '2rem', 
           fill: liked && '#00f',
           cursor:"pointer" }}
        xmlns="http://www.w3.org/2000/svg"
        onClick={() => setLiked(!liked)}
        viewBox="0 0 512 512">
        <path d="..." /></svg>
    </>
  )
}

🔽 결과: