<리액트 기초> 리액트와 Hooks

 

* Hooks 소개

 - 2018년 리액트에서 Hooks업데이트 이후 최근의 리액트는 클래스가 아닌 Hooks를 권장하고 있다.

 

 - 기존에도 함수형 컴포넌트가 사용 가능하긴 했으나 state 관리할 때에는 클래스를 써야 했었다.

 

 - Hooks의 업데이트 이후 함수형 컴포넌트를 사용하더라도 setstate와 ref기능들을 사용 가능해졌다.

 

 - 참고로 함수형 컴포넌트 = Hooks는 아니다. 기존에도 state를 안 쓸 경우에는 함수형 컴포넌트가 더 선호 되었다. hook은 함수컴포넌트가 아닌 useState나 useRef, useEffect등을 의미한다.

 

* 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);
    }

    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 (
        <>
            <div>{first} 곱하기 {second}는?</div> 
            <form onSubmit={onSubmitForm}>
                <input ref={inputRef} onChange={onChangeInput} value={value}/>
                <button>입력!</button>
            </form>
            <div id="result">{result}</div>
        </>
    )
}

 

 - 지난 장에서 만들었던 구구단 컴포넌트에 비해서 상당히 짧아졌음을 알 수 있다.

 

 - const 로 컴포넌트를 선언하고 함수형으로 만들었으며, 클래스와 달리 state를 객체로 묶지않고 하나씩 쪼개었다.

 

 - 쪼갠 변수를 보면 변수자리에 배열을 사용한 구조분해할당을 하였음을 알 수 있다. 여기서 setFirst는 first 전용 setState라고 생각하자.

 

 - 리액트의 useState 메서드로 state값을 조정할 수 있다.

 

 - onChange 함수부분을 보자. 클래스를 사용했을 때에는 value를 바로 바꿔줬지만 이제는 각각 쪼개둿으므로 setValue를 이용하여 접근해야 한다.

 

 - ref의 사용법은 별도로 변수를 선언하고 useRef메서드를 사용한다. 포커싱을 할때에는 .current.focus()를 이용한다.

 

 - 훅스를 사용할 때에는 state가 바뀔 때마다 함수부분이 다시 랜더링되므로 클래스에 비해서 조금 느릴 수 있다. 클래스는 render부분만 다시실행되기 때문이다. 그렇다고 set함수 하나하나 렌더링은 되지 않는다. 비동기이므로 한꺼번에 된다,

 

 - 참고로 리액트에서 html class를 사용하려면 className 이라고 사용하고, for은 htmlFor로 작성한다.

 

 - 이전 state를 사용할 때에는 내부에서 함수를 사용하는 것이 좋다. 비동기이므로 나중에 카운팅과 같은 것들을 사용할 때 내부 함수를 써야 제대로 작동하게 된다.

 

 - 클래스에서도 마찬가지이지만 input부분에 value를 쓸 때에는 반드시 onchange를 같이 써야한다. 그게 아니라면 defaultValue를 사용해서 defaultValue-{value}와 같은 방식을 사용해야한다.

 

 - Hooks에서는 선언하는 순서가 매우 중요하다. 따라서 중간에 순서가 바뀌면 안된다. 예를 들어 조건문 안에는 절대 usState와 같은 hooks를 넣으면 안된다는 의미이다. 웬만하면 함수나 반복문 안에도 넣지 말도록 하자.

 

 

---

 

 

 

참고

 

 

이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)