State를 왜써야하는가(+onClick 사용법)

잠깐 변수설명하고갈게요

자료잠깐 저장할 땐 변수 
let post = '강남 우동 맛집'
const
var로 쓰지만 이런식으로 사용합니다.

let 변경할수있는 변수 이지만 전역적으로 사용가능
const는 변경할수없는 변수 이지만 전역적으로 사용가능
var는 변경할 수 있는 변수 이지만 funcion안에서만 사용가능

근데 리액트에서는 state를 사용합니당

 

왜 state를 써야하냐?

변수와 state의 차이점

갑자기 변수 데이터가 강남우동에서 역삼우동으로 바뀌면
html에 자동으로 반영이안됌
변수와 다르게 state는 갑자기 변경되면
state경우에는 html은 자동으로 재렌더링됌
변동시 자동으로 html에 반경되게 만들고싶으면 state쓰셈

빡대가리식 정리 :자주변경될것같은 html부분은 state로 만들어놓기

 

자그래서 중요한 데이터는 변수말고 state에 담습니다.

 

state사용법 배우기전에 

Destructuring 문법 보고 넘어갑시다.

let num = [1,2];
1과 2가 너무용해서 변수로 빼고싶다?

let a = num[0];
let c = num[1];

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

자리를 깔맞춤해주는거임

 

State사용법

import { useState } from 'react'
function App() {
  let [a, b] = useState('남자 코트 추천')

1.import{useState}해주기

2.useState(보관할 자료)
3.let[변수1,변수2]

변수2=> state 변경해주는 함수

 

State 변경방법

let [따봉, set따봉] = useState(0)

따봉 = 따봉 +1 
등호로 변경하면 안바낌(바뀌긴해도 html 에 반영이안됌)
등호로 변경금지

항상 state 변경함수써야함(새로운 state)

 

Onclick 사용법

<sapn onClick={() => { set따봉(따봉 + 1) }}>👍</sapn> {따봉}</h4>

onClick={} 안에는 함수 넣어야함