[React] useState 이해하기

✏️ 사용전 import 해주기

useState는 자료 저장 기능임 (변수랑 비슷하다고 보면 됨)

//import
import React, { useState } from 'react'

const TodoList = () => {
  //useState 
  const [title, setTitle] = useState("내용");
  
}
export default TodoList

---

✏️ useState 사용 방법

const [title, setTitle] = useState ("내용");

저장하고 싶은 자료를 state (""); 소괄호 안에 넣어줌

const [title, setTitle] = useState ("내용");

const [ title , setTitle ]을 사용 하면 State에 저장된 자료를 가져다가 쓸 수 있음

{ title }

-> 출력 "내용"

title을 출력해보면 ("")에 보관했던 자료가 나옴 = 내용

---

✏️ destructuring 문법

[title, setTitle]

let num = [1,2]

array : 여러가지 자료들을 한곳에 보관하고 싶을 때 씀
써보니 array 안에 있는 1,2가 너무 유용해서 이걸 변수로 빼서 쓰고 싶을 때 destructuring 문법을 씀

let num = [1, 2];
let a = num[0]; // 1
let c = num[1]; // 2

array를 각각 변수로 자료 뽑는 방법
근데 더 편하게 쓸 수 있음

let num = [1, 2];

let [a, c] = [1, 2];

오른쪽이랑 왼쪽이랑 형태 맞춤을 해주면 a에는 1이 들어가고 c에는 2가 들어감. 쉽게 말하면 array 안에 있던 정보들을 각각 변수로 빼주는 방법

 const [title, setTitle] = useState("내용");

그래서 useState를 써도 ("") 자리에 [? , ?] 이렇게 array 자료가 남음.
["내용" , 함수]
첫번째 자료에는 "내용"이 들어가있고 두번째 자료에는 함수가 남아있음.
그래서 이거를 변수로 각각 빼서 쓰겠습니다~ 라는 뜻임.

---

✏️ 그럼 변수 문법이 있는데 state를 굳이 언제쓰나?

변수랑 state의 차이점.

변수?
변수는 let post = '안녕하세요' 에서 'hi'로 바뀌면 html에서도 변경해줘야함. 자동으로 안되서 내가 직접 변경해줘야함...

state는?
state 변동하면 html도 자동 재랜더링됨. 그래서 온갖거 다 state로 만들지 말고 자주 바뀔것 같은 html 부분을 state를 만들면 됨 (로고 같은건 그냥 하드코딩 해..)

---

✏️ 예시

//import
import React, { useState } from 'react'

const TodoList = () => { 
  const [title, setTitle] = useState("오늘의 날씨는 흐림");
  
  return (
    <div>
    	<h3>{title}</h3>
    </div>
    )
}
export default TodoList



-> {title} 출력
"오늘의 날씨는 흐림"