section1. 2-1. React Hooks 사용하기

Class 문법 사용하지말라?

React 에서 추천하는 방법이 class 를 사용하지말고 Hooks를 사용하라는 것이다.

하지만 class 문법도 알긴해야한다. 실무에 class로 작성된 코드가 있을 수 있기 때문.

 

함수 컴포넌트

//클래스 컴포넌트
class GuGuDan extends React.Component{
	...
}

//함수 컴포넌트
const GuGuDan = () => {
	return (<div>...</div>);
}

원래 함수 컴포넌트에서는 state와 ref같은 것들을 사용하지 못하였다. 그래서 state, ref같은 것이 필요 없는 컴포넌트에서만 함수 컴포넌트를 사용 했었다고 한다.

하지만 점점 많은 사람들이 함수 컴포넌트에서도 state, ref를 사용할 수 있게 해달라고 요청이 많아지자 React 개발팀에서 함수 컴포넌트에서도 state, ref를 사용할 수 있게 만들어 준 것이 바로 React Hooks이다.

 

React Hooks

함수 컴포넌트에 state, ref, useEffect와 같은 기능이 추가 된 것.

use~ 이렇게 use로 시작하는 것들이 Hooks이다.

클래스 컴포넌트를 사용하는 것보다 코드가 간결하고 단순하다.

 

state 선언하기 변화

//함수 컴포넌트(Hooks 사용)
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');

//클래스 컴포넌트
state = {
	value: '',
    result: '',
}

 

setState 함수 변화

//React Hooks 사용
const onChange = (e) => {
	setValue(() => {
    	return e.target.value;
	})
};

//클래스 컴포넌트
onChangeInput = (e) => {
	const {value} = e.target;
    this.setState({value});
    console.log(this.state)
};

 

ref 변화

//React Hooks 사용
const inputRef = React.useRef(null); //선언
inputRef.current.focus(); //함수 내에서 사용

//클래스 컴포넌트
onRefInput = (c) => {this.input = c;} //선언
this.input.focus(); //사용

 

전체코드 (React Hooks 사용)

<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 onChange = (e) => {
                setValue(() => {
                    return e.target.value;
                })
            }
            const onSubmit = (e) => {
                e.preventDefault();
                const ans = first * second;
                if(parseInt(value) === ans){
                    setFirst(()=>Math.ceil(Math.random() * 9));
                    setSecond(()=>Math.ceil(Math.random() * 9));
                    setValue(()=>'');
                    setResult(()=>`정답 ${ans}`);
                }else{
                    setResult(() => `땡`);
                    setValue(()=>'');
                }
                inputRef.current.focus();
            }

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