[REACT] HOOK - useState

useState

• 가장 대표적이고 많이 사용되는 HOOK
• state를 사용하기 위한 훅
• 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶다면 useState() 훅을 사용 함

 

형식

const [변수명, set함수명] = useState(초기값);

 

 

EX

import React, { useState } from 'react';

function Counter(props){
    var count = 0;
    return(
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={()=>count++}>클릭</button>
        </div>
    )
}

export default Counter;

 

Counter 컴포넌트는 버튼을 클릭하면 하나씩 증가 하지만 재랜더링이 일어나지 않아 새로운 카운트 값이 화면에 표시되지 않는다.

이런 경우 useState()를 사용하여 state를 선언하고 업데이트 해야한다.

 

 

방법1.

import React, { useState } from 'react';

function Counter2(props){
    const [count, setCount ] = useState(0);
    return(
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={()=>setCount(count +1)}>클릭</button>
        </div>
    )
}

export default Counter2;

 

 

방법2.

import React, { useState } from 'react';

const Counter1=()=>{
    const [value, setValue ] = useState(0);
    return(
        <div>
            <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
            <button onClick={()=>setValue(value +1)}>+1</button>
            <button onClick={()=>setValue(value -1)}>-1</button>
        </div>
    )
}

export default Counter1;

클래스 컴포넌트에서는 setState() 함수 하나를 사용해서 모든 state 값을 업데이트 할 수 있었지만 useState()를 사용하는 방법에서는 변수 각각에 대해 set 함수가 따로 존재한다는 것을 주의해야 한다.

 

 

 

관리해야 할 상태가 여러개 일 때

useState를 여러번 사용해야한다.

import {useState} from 'react';

const Info = () => {
    const [name, setName] = useState("");
    const [nickname, setNicknakme] = useState("");
    const onChangeName = (e) =>{
        setName(e.target.value);
    }
    const onChangeNicknakme = (e) =>{
        setNicknakme(e.target.value);
    }
    return (
        <div>
            <div>
                <input value={name} onChange={onChangeName} />
                <input value={nickname} onChange={onChangeNicknakme} />
            </div>
            <div>
                <div>
                    <b>이름 : </b> {name}
                </div>
                <div>
                    <b>닉네임 : </b> {nickname}
                </div>
            </div>
        </div>
    );
};

export default Info;