[React] UseState

🍒 useState

데이터는

1. 변수에 넣거나

2. state에 넣거나

   1. import {useState} from ‘react’

   2. let [a,b] = useState(’딸기 먹고 싶다');

      → a: 딸기 먹고 싶다, b: 이를 수정해주기 위한 함수

   변수에 안넣고 state에 넣는 이유? : 웹앱처럼 빠르게 동작하게 하려고!

   → 새로고침 없이 자동으로 재랜더링이 됨.

   ---

   import React, { useState } from "react";
   
   const UseStatePrac = () => {
   const [count, setCount] = useState(0);
   
   const handleClick = () => {
   	setCount(count + 1);
   };
   
   const [items, setItems] = useState(['치킨', '마라탕']); //초기값으로 배열을 넣은 것!
   const [input, setInput] = useState(" ");
   const handleInputChange = (e) => {
       setInput(e.target.value);
   }
   const handleEnter =() => {
       setItems((prevState) => {
           return([input, ...prevState]);
       });
   }
   return (
   	<>
       <h3>UseState 뿌셔!</h3>
   		<div>state 란, component 의 상태이다. </div>
   		<div>
   			useState를 통해서 우리는 component 의 상태를 간편하게 생성하고 업데이트할 수
   			있음.
   		</div>
   		<hr />
   		<div>숫자를 세어보쟛: {count} </div>
   		<button onClick={handleClick}>올라가렴~</button>
   		<hr />
   		<div>Enter 를 누르면 새로운게 생겨나도록 해보자구요!</div>
   		<input type="text" value={input} onChange={handleInputChange}/>
   		<button onClick={handleEnter}>Enter</button>
           {items.map((item,i)=>{
               return <p key={i}>{item}</p>;
           })}
   	</>
   );
   };
   
   export default UseStatePrac;