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>

       </>

    )

}