[React] useState

동적인 변화

import React, { useState } from "react";

function Counter(){
    /* useState ()안의 값은 초기값.
    * 비구조화 할당을 통해 number값과 setNumber(함수) 값을 추출한다 */
    const [number, setNumber] = useState(0);
    const style = { padding:20 }
    const onIncrease = () => {
        setNumber(number+1);
    }
    const onDecrease = () => {
        setNumber(number-1);
    }
    return (
        <div style={style}>
            <h1>{number}</h1>
            {/* onclick을 camel형식으로 바꿔줘야 함.
            * 함수를 사용할 때 ()를 붙이 경우, mount 되는 시점에 실행한다.
            */}
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter;

 

화면표출

 

input 상태관리

import React, {useState} from 'react';

function InputSample(){
    const [text, setText] = useState('');
    const onReset = () => {
        setText('');
    }
    const onChange = (e) => {
        setText(e.target.value);
    }
    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {text}
            </div>
        </div>
    )
}

export default InputSample;

화면표출

 

2개 이상의 input 상태를 관리할 때

function InputSample(){
    const style={padding:40};
    const [ inputs, setInputs ] = useState({
        name : '',
        nickname : '',
    });
    const { name, nickname } = inputs;
    const onChange = (e) => {
        console.log(e.target.name);
        console.log(e.target.value);
        const { name, value } = e.target;
        setInputs({
            /* 객체 상태는 복사해서 넣어주어야 함.
            * '불변성을 지킨다'
            * 리엑트 컴포넌트에서 상태가 업데이트 됐음을 감지할 수 있음
            * 필요한 렌더링이 일어날 수 있음 */
            ...inputs,
            [name] : value,
        })


    }
    const onReset = () => {
        setInputs({
            name:'',
            nickname : '',
        })
    }
    return (
        <div style={style}>
            <input placeholder="이름" name="name" onChange={onChange} value={name} />
            <input placeholder="닉네임" name="nickname" onChange={onChange} value={nickname} />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InputSample;

화면 표출