담쟁이 담쟁이

state를 다루는 것이 비슷하다면 여러개 선언하는 것이 아닌 다음과 같이 한개의 state에 선언해준다. const [state, setState] = useState({ author: "", content: "", emotion: 1, }); handle 함수를 두고 target의 이름을 가져와서 해당 target만 변경하도록 진행한다. const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; 1 2 3 4 5

리액트 16.8 버전 이후로 함수형 component에서 상태를 관리할 수 있게 됨에 따라 사용이 가능하다. Hooks 라는 기능이 16.8에 도입되면서 사용 가능한 Hooks 중 하나이다. import { useState } from 'react'; const [championName, setChampionName] = useState('' "); 첫 번째 인자값이 관리되고 있는 값이고 두 번째 인자는 함수로 써 첫 번째 값을 변경할 수 있다. const onChange = (e) =>{ setChampionName(e.target.value); } onChange 함수를 두어 들어 온 값을 두 번째 인자를 이용하여 변경 할 수 있다.