[React] 함수에서 state 사용법 - hook

클래스에서는 this.setState를 통해 새로운 값을 넘겨줌으로써 state를 업데이트 시키고, state가 업데이트 되면 React의 render 메서드를 호출합니다. 

function App () {
    return(
        <div className="container">
            <h1>Hello World</h1>
            <FuncComp initNumber = {2}></FuncComp>
            <ClassComp initNumber = {2}></ClassComp>
        </div>
    )
}

function FuncComp(props){ // 함수형에서는 함수를 호출할 때 첫번째 인자 값으로 전달된 props 값을 전달하도록 약속되어있습니다
    var numberState = useState(props.initNumber);
    var number = numberState[0];
    var setNumber = numberState[1];

    // var dateState = useState((new Date)).toString());
    // var _date = dateState[0];
    // var setDate = dateState[1];

    var [_date, setDate] = useState((new Date()).toString());
    return(
        <div className="container">
            <h2>function style component</h2>
            <p>Number: {number}</p> 
            <p>Date: {_date}</p> 
            <input type = "button" value="random" onClick={
                    function(){
                        setNumber(Math.random())
                    }
                } />
            <input type = "button" value="random" onClick={
                    function(){
                        setDate((new Date()).toString());
                    }
                } />
        </div>
    )
}

 

함수에서 마찬가지로 useState를 쓰면 2개의 값이 배열로 리턴되게 됩니다. 리턴된 배열이 가지고 있는 첫번째 값이 state 값이 될 것이, 두번째 값이 state 값을 바꾸는 함수입니다. 

위에 코드에서는 numberState 변수에 useState 배열을 담았습니다.

numberState의 첫번째 요소에는 state의 값이 들어가게 되고, 

numberState의 두번째 요소에는 state 값을 바꾸는 함수가 들어가게 됩니다. 함수를 통해서 state의 첫번째 요소의 값인 state 값을 바꿀 수 있습니다. 

this는 class 에서 사용하기 때문에 bind가 필요없고, setNumber 부분은 우리가 원하는 값을 넘겨주면 됩니다. 

 

정리하자면, 함수 방식에서 state를 만들 때에는, React의 useState를 호출합니다. useState의 인자로는 state의 사용할 초기값을 넣어줍니다. useState는 배열을 return 하는데, 2개의 값으로 이뤄져있는데, 첫 번째 값은 state 값이 주어지고 두번째 값은 그 state 값을 바꿀 수 있는 함수가 주어집니다.  

배열의 첫번째 값과 두번째 값을 통해서 함수 안에서도 state 값을 사용할 수 있게 됩니다. 

 

class 방식에서는 하나의 state에 넣어야 했는데, 함수형 방식에서는 state를 만들 때마다 useState를 사용하면 됩니다. 

 

var dateState = useState((new Date)).toString());
var _date = dateState[0];
var setDate = dateState[1];

함수형에서 state를 정의하는 부분을 아래와 같이 간단하게 바꿀 수 있습니다.

var [_date, setDate] = useState((new Date()).toString());