[REACT]중요한 데이터는 state에 저장

변수에 잠깐 데이터 저장하고 html에 {데이터바인딩} !

중요하고 자주 바뀌는 데이터는 state에 저장하는게 좋습니다 !

 

 

🐰 state 만드는법 🐰

 

import { useState } from 'react'; /*위에 이거 작성*/

 

let [a,b] = useState('코트 추천'); 
/*let [데이터, 데이터변경 도와줌] = useState('보관할 자료')*/

 

맨 윗줄에 import {useState} from 'react' 하고 

원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.

 

그리고 저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState('코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 

 

useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴  array가 남는데

위 예시를 보면 데이터1에는 '코트 추천' 자료가 들어있고

데이터2에는 state 변경을 도와주는 함수가 들어있습니다.

 

그 데이터들을 각각 변수로 뺀게되면

let [a, b] = useState('코트 추천') 이렇게 되는겁니다!

 

 

*참고로 let뒤에 저 문법은 자바스크립트의 destructuring 문법

array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법입니다.

 

---

🐰  그래서  state쓰면 좋은게 뭘까요?! 🐰

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

그렇기 때문에 UI 기능 개발도 매우 편리해지고, 사이트 전환될때

스무스하게 동작할 수 있습니다!

 

결론!

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓기!

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됩니다.