#3 useState 예제

useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다.

예제 1

1번 

import {useState} from 'react';
import React from 'react'

export default function Counter() {
    const [number, setNumber] = useState(0);

    const increase = () =>{
      setNumber(number + 1 );
    };
  
    const increaseAsync = () =>{
        setTimeout(()=>{
            setNumber(number + 1);
        },2000);
    };
  
    return (
        <>
            <button onClick={increase}>increase</button>
            <button onClick={increaseAsync}>increaseAsync</button>
            <h1>{number}</h1>
        </>
    )
}

2번

import {useState} from 'react';
import React from 'react'

export default function CounterTwo() {
    const [number, setNumber] = useState(0);

    const increase = () =>{
      setNumber(number + 1 );
    };
  
    const increaseAsync = () =>{
        setTimeout(()=>{
            setNumber((currentNumber)=> currentNumber + 1);
        },2000);
    };
  
    return (
        <>
            <button onClick={increase}>increase</button>
            <button onClick={increaseAsync}>increaseAsync</button>
            <h1>{number}</h1>
        </>
    )
}

1번의 코드와  2번의 코드에서 차이점은 상태를 업데이트할 때 직접 업데이트하는 방식과 함수를 이용해서 업데이트하는 방식이다.  위 코드를 돌려서 어떤 차이가 있는지 직접 확인해보자.

예제 2

1번

import React from 'react'
import { useState } from 'react'

export default function UserInputOne() {
    const [input,setInput] = useState("");
    const [user, setUser] =  useState({
        name : "test1",
        email : "test@test.com",
        images : ["profile.png","cover.png"],
    });

    const changeUser = () =>{
        setUser(user.name=input)
    }

    console.log(user);

    return (
        <>
            <h2>User:</h2>
            <input onChange={e=>setInput(e.target.value)} placeholder="enter a new User name"></input>
            <button onClick={changeUser}>Change User Name</button>
            <span>userName is : {user.name}</span>  
        </>
  )
}

2번

import React from 'react'
import { useState } from 'react'

export default function UserInputOne() {
    const [input,setInput] = useState("");
    const [user, setUser] =  useState({
        name : "test1",
        email : "test@test.com",
        images : ["profile.png","cover.png"],
    });

    const changeUser = () =>{
        setUser(prev=>({...prev, name:input}))
    }

    console.log(user);

    return (
        <>
            <h2>User:</h2>
            <input onChange={e=>setInput(e.target.value)} placeholder="enter a new User name"></input>
            <button onClick={changeUser}>Change User Name</button>
            <span>userName is : {user.name}</span>  
        </>
  )
}

1번의 코드와  2번의 코드에서 차이점은 상태를 업데이트할 때 직접 업데이트하는 방식과 함수를 이용해서 업데이트하는 방식이다.  또한 ...을 사용하였다. 위 코드를 돌려서 어떤 차이가 있는지 직접 확인해보자.

... = 스프레드 연산자에 대해선 아래 링크에서 확인해보자

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

 

예제 3

하나의 함수로 값 변경하기

import React from 'react'
import { useState } from 'react'

export default function UserInputOne() {
    const [input,setInput] = useState("");
    const [user, setUser] =  useState({
        name : "",
        surname : "",
        email : "",
        password: "",
        country:"",
        city :"",
    });

    const handleChange = (e) =>{
        setUser(prev=>({...prev,  [e.target.name]:e.target.value}))
    }

    console.log(user);

    return (
        <>
            <h2>User:</h2>
            <input type="text" name={"name"} onChange={handleChange} placeholder="name"></input>
            <input type="text" name={"surname"} onChange={handleChange} placeholder="surname"></input>
            <input type="text" name={"email"} onChange={handleChange} placeholder="email"></input>
            <input type="text" name={"password"} onChange={handleChange} placeholder="password"></input>
            <input type="text" name={"country"} onChange={handleChange} placeholder="country"></input>           
            <input type="text" name={"city"} onChange={handleChange} placeholder="city"></input>
        </>
  )
}