[React.js] 함수에서 사용하는Hooks State. useState

  class에서 바로 사용하는 State

class App extends React.Component {

    render() {
        return (
        );
    }
}

위와같은 형식으로 Component 에서는 State 는 그냥 바로 사용하면 됩니다.

class App extends React.Component {
	state = {
    	number:0
    }
    render() {
        return (
        );
    }
}

이런식으로 추가해서 바로 사용을 하시면 됩니다.

 

  함수에서 에서 사용하는 State, useState

import React from 'react';

const Answer = (props) => {

    return (
    );
    
};

export default Answer;

하지만 이런  함수형식에서 위에 class 에서 하던대로하면 오류가 생깁니다.

 

함수와 class 는 좀 다른 개념을 가지고있다고 하는데요..

( 어떤게 다른지 댓글 부탁드립니다.. )

 

위와같은 함수형식에서는 useState 를 사용해야 합니다.

import React ,{useState} from 'react';

const Answer = (props) => {
    const [num, setNum] = useState("초기값");

    return (
    );
    
};

export default Answer;

위 코드처럼  { useState } 를 추가해주고,

useState() 를 사용해서 값을 넣어주어야 합니다.

 

const [num, setNum] = usetState("초기값");

 

여기에 빨간색으로 칠해놓은 두개의 원소가 보이실 겁니다.

왼쪽원소 : 현재 상태 값 변수

오른쪽 원소 : 상태 값 갱신을 위한 Setter 함수

 

이 이후 만약 값을 수정하고싶다 하면

import React ,{useState} from 'react';

const Answer = (props) => {
    const [num, setNum] = useState("초기값");
    
    const upNumber = () => {
        setNum(num+1);
    }
    const downNumber = () => {
        setNum(num-1);
    }
    
    return (
    );
    
};

export default Answer;

 

이런식으로 해주시면 할 수 있습니다.