useState는 자료 저장 기능임 (변수랑 비슷하다고 보면 됨)
//import
import React, { useState } from 'react'
const TodoList = () => {
//useState
const [title, setTitle] = useState("내용");
}
export default TodoList
const [title, setTitle] = useState ("내용");
저장하고 싶은 자료를 state (""); 소괄호 안에 넣어줌
const [title, setTitle] = useState ("내용");
const [ title , setTitle ]을 사용 하면 State에 저장된 자료를 가져다가 쓸 수 있음
{ title }
-> 출력 "내용"
title을 출력해보면 ("")에 보관했던 자료가 나옴 = 내용
[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의 차이점.
변수?
변수는 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} 출력
"오늘의 날씨는 흐림"