React Hook은 React 16.8 버전에 새로 추가된 기능입니다.
기존 React에서 사용하는 Class형 Component의 문제점들을 개선해서 야심차게 내놓은 수작이죠.
React Hook은 Funcion형 Component를 구현할 수 있어요.
📍 useState는 기존 React에서 사용하던 this.setState()를 대체하는 기능입니다.
const [name, setName] = useState('미스토리');
console.log(name); // 미스토리
setName('벨로그'); //name을 벨로그로 수정
console.log(name); // 벨로그
📍 위 코드에서 name 은 변수고, setName은 변수의 데이터를 수정 할 수 있는 함수입니다.
const [list, setList] = useState(['one']);
console.log(list); // ['one']
setList(['two']) // ['two']로 변경
console.log(list); // ['two']
string 뿐 아니라 배열, 객체, 다 가능합니다
import react, { useState } from "react";
import ButtonComponents from "./ButtonComponents";
import Add from "./Add";
const App = () => {
const [add, setAdd] = useState(0);
const plus = () => {
setAdd(add + 1);
};
const minus = () => {
setAdd(add - 1);
};
return (
<>
<Add add={add} />
<ButtonComponents plus={plus} minus={minus} />
</>
);
};
export default App;
완성 ! useState 정복띠!😍