[리엑트] 4) state 사용방법
리엑트 state 사용방법
값이 변경될때 화면을 자동랜더링 시키기 위한 state
- import 할때 useState를 추가해 줘야 한다.
- state 값은 변경이 되면 자동으로 랜더링이 됩니다.(새로고침 없이)
* import 할때 useState를 추가
import React, { userState } from 'react';
* state 사용방법
let [fruit, setFruit] = useState('사과','배');
위와 같이 설정을 하면
첫번째 fruit는 위 배열 해당 하는 '사과','배' 가 들어 갑니다.
두번째 setFruit는 함수 입니다. 중요한것은 배열이 아니라 함수라는 것입니다.
그래서 사용할때는 fruit를 사용하고
원본을 직접 건드리지 않기 위해서 값을 변경할때는 함수를 이용해서 변경합니다.
이렇게 사용하면 앱처럼 특정 값만 변경이 되면 주소 이동 이나 새로고침 없이 화면이 일부분만 재 랜더링이 되어 화면이 변경 됩니다.
* 참고 자료
코딩애플 - 변수말고 state 사용
https://www.youtube.com/watch?v=Qb8Oiy8i9IY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=4