웹 프로그래밍/React

[React] useState

터렛짓는다 2021. 10. 12. 21:34

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