[React] useState Hook

useState hook 사용법을 알아보자.

 

예쁜 주사위 이미지가 있다.

주사위에 '버튼'을 만들어서 랜더링을 할때마다 상태 값이 변하도록 만들어볼거다.

먼저  Button.js  컴포넌트를 만들어주고

const Button = ({ text }) => {
  return <button>{text}</button>;
};

export default Button;

부모 컴포넌트로 이동!

import Dice from "./Dice";
import React from "react";
import Button from "./Button";

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

export default App;

버튼 컴포넌트에 text라는 props를 사용하고 App.js에 props로 전달해준다.

(Button 컴포넌트 import도 필수!)

 

여기서 props는 기본적으로 children이라는 props의 속성을 사용 할 수 있는데

children을 활용하여 위의 코드를 바꿔보면?

import Dice from "./Dice";
import React from "react";
import Button from "./Button";

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

export default App;

이렇게 변경 할 수 있다.

물론 button컴포넌트에 props로 넣어줘야한다. (아래처럼)

const Button = ({ children }) => {
  return <button>{children}</button>;
};

export default Button;

버튼을 클릭했을 때, 숫자가 변하도록 상태 값을 변경해보자.

이럴때 state 훅을 사용한다.

배열의 디스트럭처링을 하여 useState를 만들고, 초기 값은 1로 설정한다.

버튼을 누를때마다 랜덤하게 숫자가 '변경' 될 수 있게 랜덤함수를 만들어준다. 

여기서 ceil은 Math메소드다. (Math.ceil() : 소수점 이하를 올림한다.)

우리가 원하는 숫자는 1~6까지의 숫자인데, 사실상 숫자들은 0.999999999~5.99999999

이렇게 되어있기때문에 소수점 이하를 올림해야 우리가 원하는 숫자 1~6을 얻을 수 있다.

(Math.floor()도 활용가능 그러면 초기값을 7로 세팅해주면 된다. )

handleRollClick 함수를 만들어 nextNum이라는 변수에 넣어주었다. 

 

여기서 그냥 setNum(random(6)); 이렇게 넣으면 될 것을 왜 변수에 담아서 넣었을까?

이유를 생각해보면. 리액트의 특성상 불변성을 지켜줘야하기때문이다.

지금처럼 간단한 경우에는 직접적인 수정을 해도 적용이 잘되지만 코드가 조금 더 복잡해지면

랜더링이 안될 수도 있기때문에 어딘가에 담아서 넣어주는게 좋기때문이다.

결론은 setter함수를 사용할 땐 다른곳에서 수정해서 최종 결과물만 넣어주는것이 가장 바람직.

 

마지막으로 '처음부터' 버튼을 누르면 초기값 1로 돌아가게끔 clearClick함수를 만들어 넣어주면 끝!

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

const random = (n) => {
  return Math.ceil(Math.random() * n);
};

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

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

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

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

export default App;

        완성!