본문 바로가기

웹 프로그래밍/React

[React] useState

useState

리액트에서 컴포넌트는 한 번 렌덩이되고 끝나지 않습니다. 리액트의 컴포넌트는 실시간으로 계속 렌더링되는데 일반 변수를 사용하면 성능의 저하를 불러올 수 있습니다.
리액트의 컴포넌트에서 상태를 관리하는 방법 중 하나로는 useState가 있습니다.
useState는 유동적으로 변경될 값을 관리할 때 사용이 됩니다.

useState 사용해보기

  • Counter 구현

Counter.js

초깃 값을 0으로 설정을하고, 버튼을 누르면 증감이 되도록 하였습니다.

App.js

실행화면

  • Random 구현

Random.js

Counter와 마찬가지로 초기 상태는 0으로 설정을 하고 버튼을 누르면 값이 랜덤으로 변하게 구현을 했습니다.

App.js

실행화면

Github:  https://github.com/hanhyung6376/learn-react/tree/master/use-state

'웹 프로그래밍 > React' 카테고리의 다른 글

[React] useEffect  (0) 2021.10.15
[React] useCallback  (0) 2021.10.13
[React] 외부 라이브러리 없이 캘린더 구현  (0) 2021.10.11
[React] withRouter를 이용한 링크 이동시 메뉴변경  (0) 2021.09.27
[ReactJS] JSX  (0) 2021.09.06