react 리액트 hook를 이용한 상태관리 방법 - useState

Hook은 리액트 16.8 버전에서 소개된 기능으로 간단하게 상태관리를 하기 좋은 기능이다.

Hook에는 useState, useEffect, useContext, useReducer, useRef 등이 있다.

 

useState

import { useState } from "react";

const [name, setName] = useState('');

<input
    type="text"
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

useState를 사용하기 위해서는 react모듈의 useState를 import 해야 사용할 수 있다.

 

const [name, setName] = useState('');

상태 변수를 설정하고 기본값을 ''으로 설정한다.

name은 useState의 값을 불러올때 사용하며, setName은 useState에 값을 저장할 때 사용한다.

 

value={name}을 사용하여 useState의 값을 input의 value에 바인딩 한다.

onChange를 사용하여 input의 값이 바뀔때 마다 event를 받아 event의 target(input)의 value를 setName을 이용하여 useState의 값을 바꿔준다.