Hook(1): useState

Hook

• 클래스는 컴포넌트 간 재사용이 어렵고, 테스트하는데에 시간이 소요되고, 많은 개발자들을 혼란스럽게 하고 많은 버그들을 일으킨다. 이를 보안하기 위해 Hook이 도입되었다. 리액트 Hook은 함수로 state를 연결(hook into)하고 바로 함수 컴포넌트에 라이프사이클 기능을 연결 할 수 있게 해준다.(Hook은 클래스 내에선 작동하지 않는다.)
• Hook은 대표적으로 useState와 useEffect가 있고, 직접 Hook을 만들거나 다른 사용자들이 만들어놓은 Hook을 다운받아 사용할 수도 있다

useState

• useState()는 react library에서 정의된 자바스크립트 함수이다.
• useState를 호출하면 배열을 반환한다. 첫 번째 원소가 현재 상태를 설정하고, 두 번째 원소는 상태를 갱신해 주는 함수이다.
  const [count, setCount] = useState(0); <- value의 현재상태(초기값)을 0으로 지정
• 원소명은 임의로 정하면 되지만 value, setValue같은 형식으로 정하는게 좋다.
• useState가 react state management에 들어가 state를 알아서 관리해준다.
• 클래스형 컴포넌트는 state를 관리하기 위해 manual하게 하나하나 다 적어야 하지만, hook을 이용한 함수형 컴포넌트는 그렇지 않다.

숫자를 count(+-)한 값과 input에 입력된 값을 state에 저장하는 과정을 클래스형 컴포넌트와 hook(useState)를 이용한 함수형 컴포넌트로 구현하여 서로 비교해보았다.

class component

class App extends Component{
  state = {
    count : 0
  }
  modify = (n) => {
    this.setState({count : n});
  }
  uploadInput = (e) => {
    const {target:{value}} = e;
    this.setState({email: value});
    console.log(this.state.email);
  }
  render(){
    const {count} = this.state;
    return(
      <div>
        {count}
        <button onClick={() => this.modify(count + 1)}>Increment</button>
	<button onClick={() => this.modify(count - 1)}>Decrement</button>
        <input onChange={this.uploadEmail} placeholder="Email" value={this.state.email}/>
      </div>
    )
  }
}

functional component (with hook)

//원래는 함수형 컴포넌트에서 state, lifeCycle를 사용할 수 없었지만,
//이후 hook을 이용하여 state, lifeCycle를 사용할 수 있게 되었다.
const App = () => {
  const [count, setCount] = useState(0);
  const [email, setEmail] = useState("");
  const updateEmail = e => {
    const {target:{value}} = e;
    setEmail(value);
  }
  return(
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <input onChange={updateEmail} placeholder="Email" value={email}/>
    </div>
  )
}

• class형보다 hook을 이용한 함수형이 훨씬 간단한 것을 알 수 있다.
• 리액트의 컴포넌트는 클래스 또는 함수로 정의 가능하다. 클래스 컴포넌트 내에는 반드시 render() 를 써야했지만 함수 컴포넌트에선 안써줘도 된다.

[함수형 컴포넌트에서 this를 쓰지 않는 이유]
함수형 컴포넌트의 상태값은 useState훅으로 관리되기 때문에 컴포넌트의 this로부터 자유롭다. 또한 함수형 컴포넌트 자체와 함수형 컴포넌트 안에서 선언한 함수들 모두 전역 객체를 this로 가지기 때문에 애초에 this가 다 같다. 그래서 이벤트 핸들러에 콜백 함수를 넘기는 상황에도 딱히 신경 쓸 필요가 없다.