useState

state는 값을 변경되면 html에 바로바로 반영되는 반응형으로 만들고 싶을 때 사용하는 거임.

const [number, setNumber] = useState(5);

이렇게 하고,

useState가 왼쪽에 참조할 값, 오른쪽에 그 참조할 값 변경하는 콜백함수.

const increase = () => {
	setNumber(number + 1);
};

이런 식으로 사용하면 됨. 내가 명명한 setNumber 해서

값 태그에서 참조할 때는 

<h1>{number}</h1>

이런 식으로.

 

 

 

 

 

 

하다보면 저거 여러 개 사용하게 되는데, 

const [state, setState] = useState({
    name:'',
    gender:'',
    birth:'',
    bio:''
});

이렇게 객체형태로 한번에 여러개 가능.

 

근데 이러 면 사용할 때도,

const changeName = ()=>{
    setState({
      ...state, 
      name:"하이",
      birth:"5.2"
    });
}

이런 식으로 객체로.

...state 해서 원래 객체 다 받은 다음에,

추가로 name:"하이" 해서 덮어쓰는 느낌인 듯.

 

<h3>{state.name}</h3>

사용할 때는 이렇게

 

 

 

state는 감지기임.

값이 변경되면 감지하는 거임.

변경을 감지하고 바로바로 render 되는.