React (useState 사용하기)

State란?

함수 내에 선언 된 변수처럼 컴포넌트의 렌더링 결과에 영향을 주는 데이터를 가지고 있는 객체

useState함수는 리액트의 Hooks 중 하나

 

 

import

react Hooks의 useState는 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공해 준다.

useState를 사용하기 위해서는 react에서 useState를 import 받아야 한다.

 

 

변수선언

state의 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState 라는 두가지 요소를

배열 형태로 리턴해준다. state 명은 알맞게 설정하고 두번째 요소에 set을 붙여주면 된다.

 

 

변수 재선언

state의 값을 변경하려면 setState 함수를 불러서 인자에는 변경 될 값을 넣어준다.

setState 함수를 이용해서 state의 값을 변경하면 해당 컴포넌트는 화면에 다시 렌더링 되어서 state가 변경될 때마다

화면이 업데이트(렌더링) 된다. 

 

 

 

예제) 버튼을 누르면 숫자가 바뀌는 컴포넌트 만들기