❏ react - React Hooks: useState() 함수

 

✏ useState란??

 

useState는 리액트에서 동적으로 변경되는 값, 즉 동적값(State)의 상태를 처리하기 위해 사용하는 함수입니다.

복잡하고 상태관리를 할 수 없어 유지보수가 어렵던 클래스형 컴포넌트에서 유지보수가 편리한 함수형 컴포넌트로 관리하기 위해 리액트 16.8v Hooks에서 도입된 기능입니다.

 

✏ 사용법

 

리액트 패키지에서 useState를 불러와 줍니다.

 

const [num, setNumber] = useState(0);

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 👉 0

그럼 이 함수를 호출해주면 배열이 반환되는데요, 여기서 첫번째 원소는 현재 상태 👉 num

두번째 원소는 Setter 함수입니다. 👉 setNumber

 

✏  Counter.js

useState 함수를 사용하여 그럼 이젠 동적인 값을 끼워봅시다. 

 

jsx부분은 원하시는 태그를 사용하여 수정하셔도 됩니다!

import React, {useState} from "react";

const Counter = () => {
    const [num, setNumver] = useState(0);

    const increase = () => {
        setNumver(num + 1);
    }

    const decrease = () =>{
        setNumver(num - 1);
    }

    const reset = () =>{
        setNumver(0);
    }

    return(
        <div>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
            <button onClick={reset}>reset</button>
            <p>당신은 {num}번 눌렀습니다.</p> 
        </div>
    );
};

export default Counter;

잘 실행이 되는군요!

 

✏  Input.js

이번에는 input으로 다뤄보도록 하겠습니다.

import React, { useState } from "react";

const Input = () =>{
    const [txtValue, setTextValue] = useState("");

    const onChange = (e) => {
        setTextValue(e.target.value)
    };

    return(
        <div>
            <input type="text" value={txtValue} onChange={onChange} />
            <br />
            <p>{txtValue}</p>
        </div>
    );
};

export default Input;

---

👇👇👇  useState의 더 자세한 설명은 아래의 공식문서를 참고해보세요! 👇👇👇 

 

https://beta.reactjs.org/reference/react/useState

useState

🐟·´¯`·.