[React] React Hooks - useState 사용법

Hook

리액트 v16.8 에 새로 도입된 기능으로서, 기존의 함수형 컴포넌트에서도 상태 관리나 주기 관리를 할 수 있도록 다양한 기능을 제공하는 것.

컴포넌트의 상태 관리를 위해 Reack Hooks에서는 useState를 제공을 한다.  

 

- useState를 이용하지 않고 변경을 하려면

//useState를 이용하지 않고 변경
    function changeName(){
        name = name === "sanha" ? "jeongkyun" : "sanha";
        console.log(name)
        document.getElementById("name").innerText=name;
    }
    
    return( 
    <div>
   
        <h1 id="name">{name}({age}) :{msg}</h1>
        <UserName name={name}/>
        <button onClick={changeName}>Change</button>
    </div>
    
    );

 

document.getElementById로 id값이 name인 태그에 접근하여 text값을 name으로 바꿔준다. 

 

하지만 useSate를 이용을 하면 더 편리하게 접근을 할 수있다.

import  {useState} from "react"
 const [name , setName] = useState('sanha');
//useState를 이용하여 변경
        function changeName(){
        const newName = name === "sanha" ? "jeongkyun" : "sanha";
        setName(newName);
 
    }
    return( 
    <div>
        <h1 id="name">{name}({age}) :{msg}</h1>
        <UserName name={name}/>

        <button onClick={changeName}>Change</button>
    </div>
    );
    }

초기에 value에는 sanha가 들어가 있고 setName을 이용하여 값을 변경을 해줄 수 있다.