간단하게 React Hooks 사용해보기

오늘은 React의 Hooks를 사용해볼 것이다. Hooks를 썼을 때, 기존에 사용하던 class형 컴포넌트에 비해 짧고 직관적인 코딩을 할 수 있게되고, 함수형 프로그래밍 또한 가능하게 해준다고 한다. 정말 간단한 애플리케이션으로 확인해보자.

 

 

 

 

숫자를 표시해주고 plus 1 버튼을 누르면 숫자가 1이 증가한다. 이런 애플리케이션을 React로 만든다면 코드는 대략 아래와 같을 것이다.

class App extends Component { 

  state = {
    count:0
  }

  plus = (x) => {
    this.setState({
      count:x
    });
  }

  render() {
    const { count }   = this.state;
    return (      
     <div>        
        {count}
        <br/>
        <button onClick={() => this.plus(count+1)}>plus 1</button>
     </div>
      );
    }  
  }

state와 component를 이용한 전형적인 class 방식의 프로그래밍이다. 하지만 Hooks를 쓴다면 코드를 짧고 직관적으로 바꿀 수 있다.

 

const App = () => {
    const [count, plus] = useState(0);    
    return (
      <div>
        {count}
        <br/>
        <button onClick={() => plus(count+1)}>plus 1</button>
      </div>
    );
  }

한눈에 봐도 변화를 알 수 있다. 배열에 인자와 함수를 넣으면 useState가 알아서 처리해주기 때문에 일일히 state나 function을 만들지 않아도 된다. useState 괄호 안의 값은 초기값을 의미한다.

 

 

---

참고 : reactjs.org/docs/hooks-intro.html

Introducing Hooks – React