JS signup-state

Hooks

: 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다
: 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

1. useState
   : useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.
   : 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다.

useState 를 사용 할 땐 코드의 상단에서 import 구문을 통하여 불러와야함

import { useState } from 'react';

2. useEffect
   : useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook
   : mount, update, unmount 되었을때 작업 처리 가능

import {useEffect } from 'react';

변수 만드는 방법 비교

let count = 0
const count = 0
const[count,setCount]=useStatue(0)
// 0이 초기값을 가지는데 count에 들어가게 된다.
이때 count는 변수명, useState는 변수 만들기, setCount는 변수 바꾸기 이다.
count의 값이 0으로 바뀌게 된다

ex)

기존의 방식

function zzz(){
	const aaa =Number(document.getElementById("qqq").innerText) + 1
    document.getElelmentByID("qqq").innderText = aaa
}
return (
	<div>
  		<div id="qqq">0</div>
  		<button onClick={zzz}>카운트 증가 !!</button>
  	<div>
)

React의 state 방식

const [count, setCount] =useState(0)

function zzz(){
	setCount(count + 1)
}

변수 바꾸는 방법 비교