State란?!

State란?!

 

자료를 잠깐 저장할땐 변수를 사용한다

리액트에서 State도 자료를 저장하고 싶을 때 사용할 수 있다.

 

post 변수처럼 자료를 잠깐 저장할땐 변수를 사용한다.

react에서도 자료를 잠깐 저장할때 state를 써도된당

useState를 입력하고 엔터를 치면 상단에  

import {useState} from 'react'가 자동으로 입력된다!

 

 

 

State를 만드려면!

1. import {useState} 

 useState를 가져온다.

2. useState(보관할 자료를 담아준다)

3. let [ a, b ]

보관할 자료를 사용하고 싶다면 위처럼 코드를 짜준다.

 

이때 a는 state에 보관했던 자료다! a를 불러오면 '남자 코트 추천' 이 불러와진다.

b는 state 변경을 도와주는 함수이다.

 

---

이때 let [a,b] = useState(); 같은 꼴을 destructuring 문법이라고 한다.

* Destructuring 문법*

let num = [ 1, 2 ];

변수 a 와 b에 각각 num[0]과 num[1]의 값을 넣고 싶을 때,

let a = num[0];

let b = num[1];

이렇게 넣어야하지만 

Destructuring 문법은 

let [a, c ] = [ 1 , 2 ] 이렇게 바로 넣어준다!

---

변수 VS State  왜 State를 사용해야할까!?

일반 변수는 갑자기 변경을 하려면 자동으로 반영이 되지 않는다.

post 변수값을 바꾸고 바로 반영시켜주고 싶다면  따로 코딩을 다시 해줘야함..

state를 사용하면 변수를 변경할때 state를 쓰던 html이 자동으로 재렌더링 된다!

 

변동시 자동으로 html에 반영되게 만들고 싶으면  state를 사용하자~~~

 

---

다른 예제

 

리액트에서 동적으로 값이 변경되는 것을 관리할 때는 useState라는 함수를 이용하는것!

첫번째 요소는 useState가 초기에 갖고있던 값을 가지고 있는 변수이다.

두번째 요소는 첫번째 요소, 변수의 setter 함수이다 변수를 변경할 수 있게 해주는 함수!

 값을 변경해서 다시 저장하고 싶다면 setter함수를 이용해야만 한다.

setter함수를 이용해서 변수의 값을 변경하고 있는데, 

위 코드에서 setNumber( num+1 );

가 의미하고 있는것은 num = num +1  이라는 뜻!