React hooks(UseState) 사용하기

React hooks 사용해보기 

react hooks는 리액트 16.8부터 새로생긴 기능이다. react에서 평소에 state를 관리해주기 위해 

ComponentDidMount 

ComponentWillMount

등과 같은 내장 함수를 사용했습니다. 그리고 이러한 내장함수와 state를 사용하기 위해서는 무조건 Class를 사용했어야 했습니다. 

하지만 hooks부터는 클래스를 사용하지 않고도 함수 형태로 state를 관리할 수 있습니다. 그리고 ComponentDidMount나 ComponentWillMount 등을 사용하지 않고도요. 

요약하자면 클래스 없이 함수의 형태로 state를 다루고 관리할 수 있다. 입니다. 

그렇게 된다면 완전한 함수형 프로그래밍이 가능하게 될 것입니다.

그럼 간단한 사용기를 올려보겠습니다.

단순히 클릭을 통해 숫자를 카운트하는 페이지를 만들어 보았습니다.

hooks를 사용하기 전

import React, { Component, Fragment } from "react";

class App extends Component {

state = {

count: 0

};

_increment = n => {

this.setState({

count: n

});

};

render() {

const { count } = this.state;

return (

<Fragment>

<div>{count}</div>

<button onClick={() => this._increment(count + 1)}>Increment</button>

</Fragment>

);

}

}

export default App;

hooks를 사용한 후

- useState는 array를 반환합니다.

- 첫 값은 value 두 번째 값은 수정 함수입니다. 

import React, { useState, Fragment } from "react";

const App = () => {

const [count, setCount] = useState(0);

return (

<Fragment>

{count}

<button onClick={() => setCount(count + 1)}> increment </button>

<button onClick={() => setCount(count - 1)}> decrement </button>

</Fragment>

);

};

export default App;

같은 기능인데 코드 길이만 봐도 어마어마하게 차이가 난다. 간략하게 코드를 작성할 수 있으며 함수형으로 프로그래밍할 수 있어서 좋은 것 같다. 다음에는 useState가 아닌 useEffect를 사용하는 글을 작성하겠다.