변수로 데이터바인딩 했던 거
let post = "강남 우동 맛집"; <h4>{post}</h4> //강남 우동 맛집이렇게 간단한 자료를 변수에 담아 바인딩했던 것 외에도
state문법이라는 것이 있다.
그대로 변수로 담아서 쓰면 되지않아요? state는 왜 쓰는거에요?
변수에 담은 자료는 만약 저장된 자료의 내용이 변경된다고 할지라도 html을 자동적으로 변경해주지않죠.
하지만 state라는 애는 자기가 알아서 html을 재렌더링 해줌!
그니까 자주 자료가 변경되거나, 이러한 변동시 자동으로 html을 렌더링해주길 원한다면 state를 쓰면 좋겠쥬.
state 기본 문법
1. import{useState}
우선 상단에 usestate문법을 react에서 가져와 import
import {useState} from 'react';2. useState(보관할 자료)를 만들고
useState('Oching React Blog');이렇게 useState를 생성하면 배열형식으로 값을 저장하는데,
['Oching React Blog', 함수] 를 낳는다.
3. 사용할 수 있게 let[작명, 작명]해 연결함
let [logo, setLogo] = useState('Oching React Blog');여기서 첫번째 인자로 오는logo는 state에 보관했던 자료를 반환.
두번째 인자인 setLogo는 state변경을 도와주는 함수가 된다.
💡참고) Destructuring문법
특이하게 생겼잖아.. 이해하고싶어.. 바로 destructuring이라는 문법임.
js에서 배열 형식의 변수에 인자의 순번으로 맞춰 값을 저장하는 문법이다.
useState도 이 문법 구조를 따르는 것임.let a = num[0]; //오예 let c = num[1]; //주말 let d = num[2]; //사실아님얘를
let [a,c,d] = ['오예','주말','사실아님'];이렇게 표현할 수 있다는 소리임.
FE Studying