React HOOK : useState (state 지정하기)

reactjs.org/docs/hooks-state.html

왼쪽은 HOOK을 사용한 코드, 오른쪽은 class component를 사용한 코드

HOOK을 사용하면 컴포넌트를 class로 만들 필요도 없고, 훨씬 코드사용량이 줄어든다.

 

1. import로 { useState } 를 불러옴.

2. state 설정.

 const [state이름, setState를 대신할 함수이름] = useState(state의 초기값); 

3. state 변경.

 setState(변경할 state 값); 

or

 setState( preState => ...preState.... ); 

useState에서 함수를 사용할때는 기본적으로 바꾸기 전 state값을 인자로 받아온다.

위의 화면과 같은 경우

setCount( preCount => preCount + 1);

이렇게 사용할 수 있음.