[React] 게임으로 배우는 리액트 - Hooks — 공부하는 개발자 강씨네

728x90

Hooks는 class와는 다르게 const로 함수를 선언합니다.

이러한 방식이 없었던 것은 아니고 class에서는 setState를 사용했지만 setState를 사용하지 않을경우 이와 같은 방법을 사용합니다.

하지만 함수방식을 좋아하는 사람들이 함수방식 안에서도 setState를 사용할수 있도록 만들어 달라고 요구했으며 함수 형태에서도 state와 ref를 사용할수 있게 되었습니다.

이것이 React Hooks입니다.

class와 hooks는 취향차이이긴 하지만 리액트에서는 hooks를 권장하고 있습니다.

하지만 현재 작성되어있는 대부분의 코드는 class방식으로 작성이 되어있기 때문에 class방식으로 리액트 문법을 작성하는 것도 알고 있어야합니다.

<html>
    <head>
        <meta charset="UTF-8">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel">
            const GuGuDan = () => {
                const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
                const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
                const [value, setValue] = React.useState('');
                const [result, setResult] = React.useState('');

                const inputRef = React.useRef(null);

                const onChangeInput = (e) => {
                    setValue(e.targer.value);
                };

                const onSubmitForm = (e) => {
                    e.preventDefault();
                    if(parseInt(value) === first * second){
                        setResult((prevResult) => {
                            return '정답 : ' + value
                        });
                        setFirst(Math.ceil(Math.random() * 9));
                        setSecond(Math.ceil(Math.random() * 9));
                        setValue('');
                        inputRef.current.focus();
                    } else {
                        setResult('떙');
                        setValue('');
                        inputRef.current.focus();
                    }
                };

                return (
                    <React.Fragment>
                        <div>{first} 곱하기 {second}는?</div>
                        <form onSubmit={onSubmitForm}>
                            <input ref={inputRef} value={value} onChange={onChangeInput} />
                            <button>입력!</button>
                        </form>
                        <div>{result}</div>
                    </React.Fragment>
                )
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
        </script>
    </body>
</html>

앞선 포스팅의 구구단 코드를 class에서 hooks로 바꿔보았습니다.

state를 hooks로 하나씩 분리해주고 setState했던것도 하나씩 분리줍니다.

이전에 setState가 class안에 있었던것 처럼 gugudan 컴포넌트 안에 작성해주어야합니다.

또한 onSubmitForm함수도 이처럼 형태를 바꾸어 주면됩니다.

728x90

'SPA > React' 카테고리의 다른 글

[React] 게임으로 배우는 리액트 - import와 require 비교 (0)	2022.05.31
[React] 게임으로 배우는 리액트 - Webpack(웹팩) (0)	2022.05.30
[React] 게임으로 배우는 리액트 - ref로 초점맞추기 (0)	2022.05.28
[React] 게임으로 배우는 리액트 - Fragment, setState (0)	2022.05.27
[React] 게임으로 배우는 리액트 - 구구단게임 만들기 (0)	2022.05.26

'SPA > React' 카테고리의 다른 글

티스토리툴바