[React] State/ 주사위 던지기

[State (스테이트)]

리액트에서 변수같은 역할을하며, 스테이트를 바꾸면 react 가 화면을 새로 랜더링 해줌.

 

import { useState } from 'react';

스테이트를 사용하려면 리액트에서 useState 함수를 불러와야 한다.

 

 

일반적으로 useState 함수는 다음과 같이 작성되며, 

 

function App() {
    const [num, setNum] = useState(1);

 

파라미터로 초기값 (여기서는 useState(1);) 을 전달받고, 함수가 실행된 후에는 배열의 형태로 요소 2개 (num, setNum)를 리턴한다.

따라서 배열의 destructuring 문법으로 코드를 작성하게 되는 것.

 

1. 첫번째 요소 (num = state)

배열의 두 요소중 첫번째(num)는 State 값으로, 쉽게말해 현재 변수의 값을 나타낸다.

처음에는 당연히 useState함수를 호출할 때 전달한 초기값(useState(1);) 을 가진다.

 

2. 두번째 요소 (setNum)

두번째 요소는 setNum 함수로, 이 함수를 호출할 때  파라미터로 전달하는 값으로 state (num) 값이 변경이 되는 것.

state를 사용할 때는, 이 변수(num) 에 새로운 값을 할당해서 값을 변경하는게 아닌, 반드시 setNum 함수를 통해 값이 변경되는 것.

일반적으로 이름을 지어줄 때, state 앞에 set 을 붙여 이름을 지어줌. 따라서 setNum.

 

---

[주사위 게임]

 

1. 던지기 (랜덤한 주사위 수 굴리기) 

 

다음 함수는 파라미터 n으로 숫자값을 전달받아, 1~n 까지의 랜덤한 정수를 반환한다.

function random(n) {
    return Math.ceil(Math.random() * n);
}

 

위의 함수를 nextNum 으로 전달받아, 랜덤한숫자로 numState가 변경이 되도록 함.

    const handleRollClick = () => {
        const nextNum = random(6);
        setNum(nextNum);
    };

 

2. 처음부터 (주사위 초기값으로 돌리기)

 

numState 의 값을 1로 바꾸는 함수를 만듬.

    const handleClearClick = () => {
        setNum(1);
    };

 

3. 버튼 component 에 onClick prop으로 전달

return (
    <div>
        <div>
            <Button onClick={handleRollClick}>던지기</Button>
            <Button onClick={handleClearClick}>처음부터</Button>
        </div>
        <Dice color="red" num ={num} />
    </div>
    );

 

 

이를 정리하면 다음과 같다.

 

(App.js)

import { useState } from 'react';
import Button from "./Button";
import Dice from "./Dice";

function random(n) {
    return Math.ceil(Math.random() * n);
}

function App() {
    const [num, setNum] = useState(1);

    const handleRollClick = () => {
        const nextNum = random(6);
        setNum(nextNum);
    };

    const handleClearClick = () => {
        setNum(1);
    };


    return (
    <div>
        <div>
            <Button onClick={handleRollClick}>던지기</Button>
            <Button onClick={handleClearClick}>처음부터</Button>
        </div>
        <Dice color="red" num ={num} />
    </div>
    );
}

export default App;

 

(Button.js)

function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button onClick={onClick}>{children}</button>
}

export default Button;