state 특징

[state 정리]

1. 변수 대신 쓰는 데이터 저장 공간
2. useState() 를 이용해 만들어야 함
3. 문자, 숫자, array, object 다 저장 가능

---

- 데이터 넣는 방법: 

1) 변수에 넣거나

2) state 넣거나

 

[state 사용 방법]

state 사용하기 위해서는 { useState } 상단에 첨부!

import React, { useState } from 'react';

cf) ES6 destructuring 문법
 - array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용
 ex) 10,100을 a,b에 넣어주세요!
var [a,b] = [10, 100] 

let [a,b] = useState('남자 코트 추천');
=> [state데이터, state 데이터 변경 함수]

 

- state 에 데이터 저장해놓는 이유: 웹이 App 처럼 동작하게 만들고 싶어서
state는 변경되면 HTML 자동으로 재렌더링 됨! (변수로 했을 경우엔 변경되어도 자동 재렌더링이 되지 않음, 새로고침 해야만 바뀜)
=> HTML이 새로고침 없이도 스무스하게 변경됨
자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 쓰자!