React-Hooks

함수형 컴포넌트가 클래스형 컴포넌트보다 간편하지만, 함수형 컴포넌트로는 클래스형 컴포넌트의 모든 기능을 따라갈 수 없다. 그래서 React는 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하게 하기위해서 Hooks이라는 도구를 만들었다.

useState

‣useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하면 된다.

state란 컴포넌트에서 데이터를 담기 위한 상자(변수)이다. 

▪︎ state: 컴포넌트에서 사용하는 변수
▪︎ setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
▪︎ useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능

import { useState } from "react";

const [변수명, 변수바꾸는기능] = 변수만드는기능(초기값) 
const [classmate, setClassmate] = useState("철수")
setClassmate("영희")     
// classmate 가 영희로 바뀜.
// react에서 import 해야한다.

‣React에서 let을 안쓰고 state를 변수로 사용하는 이유? 컴포넌트는 화면에 보여지는 부분과 데이터를 관리하는 부분으로 나눌 수 있다. let을 사용해서 클릭한 갯수를 카운트하는 것을 그렸다면, 클릭한 수가 16에서 17로 증가했을 때, 데이터 관리하는 부분만 변경되고 화면에 보여지는 부분은 변경되지 않는 문제가 발생한다.

useState를 사용한다면 state를 사용해서 화면에 그리고 setState를 사용해서 클릭한 갯수를 변경하면 setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려진다.

Quiz

인증번호 6자리 "000000"과 "인증번호전송"이라는 버튼을 만들고, 버튼 클릭시 인증번호를 만들어서
인증번호 6자리가 변경되도록 적용해 주세요.
1-1) let과 document.getElementById()를 사용해 주세요.
1-2) state를 사용해 주세요.

1-1)

export default function VerificationLetPage () {
    function aaa() {
        let Code = String( Math.floor(Math.random()*1000000)).padStart(6, "0");
        document.getElementById("number").innerText = Code;
    }
    return(
        <>
            <div id="number">000000</div>
            <button onClick={aaa}>인증번호전송</button>
        </>
    )
}

1-2)

import { useState } from "react";
//
export default function (){
    const [number, setRandom] = useState("000000")
    function aaa (){
setRandom(String(Math.floor(Math.random()*1000000)).padStart(6,"0"))
    }
    return (
        <>
        <div id="number">{number}</div>
        <button onClick={aaa}>인증번호전송</button>
        </>
    )
}

참고 https://velog.io/@velopert/react-hooks