useState를 통한 component에서 변경되는 값 관리하기

리액트 16.8 버전 이후로 함수형 component에서 상태를 관리할 수 있게 됨에 따라 사용이 가능하다.

Hooks 라는 기능이 16.8에 도입되면서 사용 가능한 Hooks 중 하나이다.

 

 

import { useState } from 'react';

 

const [championName, setChampionName] = useState('' ");

 

첫 번째 인자값이 관리되고 있는 값이고 두 번째 인자는 함수로 써 첫 번째 값을 변경할 수 있다.

 

const onChange = (e) =>{

    setChampionName(e.target.value);

  }  

 

onChange 함수를 두어 들어 온 값을 두 번째 인자를 이용하여 변경 할 수 있다.

 

 

<input value={championName} onChange={onChange}/>