Hook은 class를 작성하지 않고 Functional Component에서도 상태(state)나 생명주기 등 React의 특징을 사용할 수 있는 React v16.8의 새로운 스펙이다.
React Native는 v0.59부터 Hook을 지원한다고 한다.

useState

state와 초기 상태값을 세팅할 수 있다. useState(초기 상태값)

• useState가 리턴하는 배열의 0번째 인덱스는 상태값, 읽기전용
• 1번째 인덱스는 상태값(0번째 인덱스)을 변경하는 setState처럼 상태값을 변경하는 함수

export const App = () => {
  const [item, setItem] = useState(1);
  // useState는 Array를 리턴한다.
  
  const incrementItem = () => {
    setItem(item + 1);
  };
  const decrementItem = () => {
    setItem(item - 1);
  };
  return (
    <div className="App">
      <h1>Click Buttons! {item}</h1>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
};

함수 컴포넌트에서 useState로 상태값을 정의할 때

const item = useState(1)[0];
const setItem = useState(1)[1];

이렇게도 쓸 수 있다.

without Hooks (Class Component)

class App extends React.Component {
  state = {
    item: 1
  };

  incrementItem = () => {
    this.setState((state) => {
      return state + 1;
    });
  };
  decrementItem = () => {
    this.setState((state) => {
      return state - 1;
    });
  };

  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Click Buttons! {item}</h1>
        <button onClick={this.incrementItem}>Increment</button>
        <button onClick={this.decrementItem}>Decrement</button>
      </div>
    );
  }
  
}