React-Hooks : useState 연습하기

React에서 함수형 컴포넌트를 이용하면 클래스형 컴포넌트보다 훨씬 간단하게 코드를 작성할 수 있다. React-Hooks는 함수형 컴포넌트로 좀 더 나은 코드를 작성하는데 도움을 준다.

React에서는 컴포넌트 내에서 데이터를 저장하는데 state를 사용한다.

• state : 컴포넌트 내에서 사용하는 변수
• useState : 컴포넌트에서 사용하는 변수를 만들어주는 기능
• setState : 컴포넌트에서 사용하는 변수를 변경해주는 기능

포맷은 이러하다.

const [state, setState] = useState("initial value")

연습 1. 버튼을 누를 때마다 숫자가 커지게 하기

export default function StatePage() {
  
  const [count, setCount] = useState(0)
  
  const handleCount = () => {
    setCount(count + 1)
  }
  
  return(
    <>
      <div>{count}</div>
      <button onClick={handleCount}>Count</button>
    </>
  )
}

연습 2. 버튼을 누를 때마다 인삿말 바뀌게 하기

export default function StatePage() {

  const [greet, setGreet] = useState("Hello!")
  const [sign, setSign] = useState("Sign in")

  const handleClick = () => {
    greet === "Hello!" ? setGreet("Welcome~") : setGreet("Hello!")
    sign === "Sign in" ? setSign("Sign out") : setSign("Sign in")
  }

  return(
    <>
      <div>{greet}</div>
      <button onClick={handleClick}>{sign}</button>
    </>
  )
}

연습 3. 버튼을 누를 때마다 6자리의 랜덤한 토큰을 발급받고 초기화 하기

export default function StatePage() {

  const [token, setToken] = useState("000000")
  const [get, setGet] = useState(false)
  const [refresh, setRefresh] = useState(true)

  const getToken = () => {
    setToken(String(Math.floor(Math.random() * 1000000)).padStart(6, 0))
    setGet(true)
    setRefresh(false)
  }
  
  const refreshToken = () => {
    setToken("000000")
    setGet(false)
    setRefresh(true)
  }

  return(
    <>
      <div>{token}</div>
      <button onClick={getToken} disabled={get}>Get</button>
      <button onClick={refreshToken} disabled={refresh}>Refresh</button>
    </>
  )
}