[React] 2-1 React Hooks 사용하기 (class와의 차이)

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

앞에서 사용했던 방법은 class를 사용한 방법이였다. 

 

함수 컴포넌트는 보통 안에서 setState와 ref를 할 필요가 없는 경우에 사용했다. 

그래서 매우 깔끔했는데, 

여기서도 setState랑 ref를 사용하고싶ㄷㅏ!!! 라는 사람들의 요청에

그 둘을 사용할 수 있게 만들어 준것이 바로 

React Hooks다. 

 

React Hooks

함수형 컴포넌트에서만 사용되는 특수한 형태의 함수를 의미
다른 함수들과 착각하지 않게 앞에 use를 붙여서 만든다. 
(ex. useState, useEffect() ...

 

class component 에서 만든 구구단 컴포넌트

class GuGuDan extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 바뀌는 것들을 속성으로 추가해주기
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
            result: '',
        };
    }

클래스에서는 state를 한번에 묶어서 만들어 주었다

hooks으로 만든 구구단 컴포넌트

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.target.value); 
            };

위에서 [ first, setFrist ] 안에는 아래처럼 state와 setState를 적어주면 된다.

변수자리에 [] 나 {} 를 사용하는 것은 비구조할당(구조분해할당)이라고 부른다. 

이 내용은 추후 정리해서 따로 올리도록하고,,,

[ state, setState ] 임!

이렇게 만들어주면 setFirst는 first전용 setState가 된다. 

 

나머지 코드를 보자

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

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

            return (
                <React.Fragment>
                <div>{first} 곱하기 {second} </div>
                <form onSubmit={onSubmitForm}>
                    <input ref={inputRef} onChange={onChangeInput} value={value}/>
                    <button> 입력! </button> 
                </form>
                <div id="result">{result}</div>
            </React.Fragment>
            );
        }

    </script>
    <script type="text/babel">
        ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
    </script>

앞에서 사용했던 onChange같은 이벤트 리스너는 클래스가 없기에 사용할 수 없다. 

그래서 아래처럼 함수를 만들어서 넣어주었다.

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

위에서 ref를 사용하기위해 const inputRef = React.useRef(null);  이렇게 선언해주었는데, 

여기를 사용하려면 current를 붙여줘야한다. (DOM에 접근하기위해)

inputRef.current.focus();