[React] Hooks - useState을 왜 사용될까?

Hooks

전에 useState에 대해 다뤘는데, 생각해보니 왜 useState을 다뤄야하는 이유를 잘 몰라 찾아보았다.
그리고 내용을 찾았는데, 기본적으로 hook을 먼저 알아야되서 내용들을 공유해보려고 한다.
Hook안에 useState와 useEffect가 있는데, 주요 쓰는 Hook들을 정리하겠다.

useState을 써야 되는 이유

일단 예시를 한번 써보겠다.

function App (){
    const[item, setItem] = useState(1);
    const incrementItem = () => setItem(item + 1);
    const decrementItem = () => setItem(item - 1);
    return (
        ..
        <button onClick = {incrementItem}>증가</button>
        <button onClick = {decrementItem}>감소</button>
        ..
    )
}

이것이 useState을 쓴 예시이다.
버튼을 눌렀을 때 해당 숫자가 1씩 증가, 감소하는 형태인데,
우리가 hooks을 쓰지 않았을때는 이러했다.

class App extends React.Component{
    state = {
        item : 1
    }
    render(){
        const {item} = this.state;
        return (
        ..
        <button onClick = {incrementItem}>증가</button>
        <button onClick = {decrementItem}>감소</button>
        ..
    )
    };
    IncrementItem = () => {
        this.setState(state => {
            return {
                item : state.item + 1
            };
        });
    };
    DecrementItem = () => {
        this.setState(state => {
            return {
                item : state.item - 1
            };
        });
    };
}

코드가 매우 어지럽다. 버튼 하나를 활성화하려고 이렇게 긴 코드를 써야되는 것이다.
useState는 앞에서 다뤘지만, 배열로 두개를 선언한 다음,
뒤에 하나로 통일하여 초기화해준 후 사용하면 된다.

useInput

useInput은 기본적으로 쓰는 Input을 업데이트해준다.
그리고 일단 initialValue을 받는다.

const useInput = (initialValue) => {
    const [value, setValue] = useState(initialValue);
};

추가 팁!

const name = useInput("Mr.");
return(
    ..
    <input placeholder="Name" value={name.value}>
    ..
)

const name = useInput("Mr.");
return(
    ..
    <input placeholder="Name" {...name}>
    ..
)

같은 의미이다! 이렇게 사용하면 name안에 있는 모든 것들을 풀어주는 형태가 된다.
여기서 위에 추가로 더 선언해도 {…}을 이용하여 간단하게 작성 가능하다.