리액트 hook 을 사용 해 보자.

이전 포스트에 분명히 이 내용을 언급 한 적이 있다.

여기에서 조건이 있는데, state 를 사용 하려면, 함수형 컴포넌트가 아닌, class 형태의 컴포넌트를 React 를 상속받아 정의 해야한다.

리액트 #3 에서

하지만 hook 을 사용하면 함수형 컴포넌트에서도 state 를 사용 할 수 있다.

먼저 아래 코드를 보자

import React, { useState } from "react"; // 1

const App = props => {
  const [count, setCount] = useState(0); // 2

  return (
    <div>
      count is : {count} {/* 3 */}
      <br />
      <button onClick={() => setCount(count + 1)}>Increase</button> {/* 4 */}
      <button onClick={() => setCount(count - 1)}>Decrease</button> {/* 5 */}
    </div>
  );
};

export default App; // 6

1 : 기존에 jsx import React from 'react'; 에서 { useState } 를 추가 한 것이다.

2 : import 한 useState 를 사용 하는 방법이다. 여기서 count 는 state 가 될것이고, setCount 는 이전에 class 형태의 컴포넌트에서 this.setState() 가 하는 일을 대신 해줄것이다.

쉽게말해, const [값, 함수] = useState(초기화 할 값); 이 된다. 값을 정의하지 않으면, undefined 이다.

3 : count state 를 랜더링 한다.

4 : count state 를 1씩 증가시킨다. 이 때, 2번에서 정의 해 둔, setCount() 를 함수 형태로, 호출한다.

5 : count state 를 1씩 감소시킨다.

6 : 컴포넌트를 내보낸다.

이렇게 훅을 사용하면 매우 쉽게 함수형 컴포넌트에서 state 를 사용 할 수 있다! 야호