[React Hook] 01 - useState()

headerimg

REACT HOOK!

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다.
Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
얼마나 좋은지는 아래에 useState()를 보고 판단하자

React Functional Program을 하려면 Hook을 쓰자. 🙏

useState()

당신이 만약 버튼 2개로 이루어진 카운터 컴포넌트를 만든다고 가정하고
Class와 Hook으로 각각 만들어서 비교해보면 좋은지 안좋은지 알 것이다.

Class Counter

class CountClass extends React.Component {
  state = {
    count: 0,
  };
  increase() {
    this.setState((state) => {
      return { count: state.count + 1 };
    });
  }
  decrease() {
    this.setState((state) => {
      return { count: state.count - 1 };
    });
  }
  render() {
    return (
      <div className="countClass">
        <h1>Class</h1>
        <p>count : {this.state.count}</p>
        <button onClick={() => this.increase()}>증가</button>
        <button onClick={() => this.decrease()}>감소</button>
      </div>
    );
  }
}

좀더 줄일 수는 있지만 평범하게 만들자면 이런식으로
증가, 감소를 각각 함수로 빼주고 state.count를 변경한다.

Hook Counter

function CountHook() {
  // [0]번은 state 변수 이름, [1]은 값을 갱신하는 함수
  const [count, setCount] = useState(0); // 0은 초기 값
  const increase = () => setCount(count + 1); // 값을 갱신한다.
  const decrease = () => setCount(count - 1);
  return (
    <div className="countHook">
      <h1>Hook</h1>
      <p>count : {count}</p>
      <button onClick={increase}>증가</button>
      <button onClick={decrease}>감소</button>
    </div>
  );
}

😱 놀랍게도 거의 10줄에 끝나버렸다. 열받는 this도 없고 값을 변경하는 setState도 없어지니 이해하기도 한결 편하다. 물론 장점만 있는 것은 아니다… Closure가 찾아오기 전까진 조용히 재미있어하자.


© 2018. All rights reserved.