보통 새로운 단어를 처음 봤을때, 느끼는 감정은 두 가지이다.
- 와 신기한 표현이고 알아둬야겠군
- ??? 내가 알아둘 필요는 없을거 같은데???
리액트의 props, state, UseState가 딱 그런 친구들이다.
강의나 문서들을 보면 Props와 State는 둘 다 데이터이고,
UseState는 이런~저런~ 기능을 사용하는 것이다.라고 설명을 하니
찐 문과 감성인 나에겐 머리에 '~U~seS~ta~te'하면서
내 기억님이 갈 길을 가신다.
가지 마세요... ㅠㅠ
내가 생각하는 UseState는
변수 대신 사용하는 데이터 마법 바구니
UseState는 함수형(Fuction)으로 리액트를 사용할 때 사용하는 리액트Hook이라는 도구이다.
리액트Hook = useState는 아니지만,
이것만 알아도 마법바구니 라 왠만한 것들은 사용할 수 있다.
useState 를 통해서 실제로 웹에서 변화하는 것들을 실행시킬 수 있다.
본격적인 useState에 대한 설명이다.
const [state값, state변경함수] = useState(0);
<did onClick={ ()=>{ state변경함수(state변경값 +1)}} 변경
useState(0)은 초기 값이고, onClick 박스를 누르면 변경함수가 작동되면서 1씩 추가된다. 0, 1, 2...
useState 값이 다음과 같이 useState(['A','B']) 배열 값이라면,
직접적으로 배열을 똑같이 변경시켜주거나 함수를 만들어서 변경할 수 있다.
1. 배열 수만큼 똑같은 교환
function StateChange() {
state변경함수( ['c', 'd', 'e'] )
}
2. 새로운 배열을 만들고 그 위치에 새로운 값을 넣기
function StateChagne() {
var newArray = [...state];
newArray[0] = 'c';
글제목변경( newArray );
}
<Array,object state 데이터 수정 방법>
1. State를 변경하기 위해서는 변경 함수를 사용해야함.
2. 변경할 함수는 복사하는 데이터로 표현해야함
3. State는 직접 건드리면 안되는 녀셕
useState는 사실상 리액트를 움직이는 마법 도구이기 때문에, 이해가 안가더라도 반복적으로 코드를 따라치면서
그 흐름을 읽어야한다!!!
