TIL13 | 내가 보려고 올리는 - "useState"

React Hook ?

React Hook은 React 16.8 버전에 새로 추가된 기능입니다.
기존 React에서 사용하는 Class형 Component의 문제점들을 개선해서 야심차게 내놓은 수작이죠.
React Hook은 Funcion형 Component를 구현할 수 있어요.

useState 사용법

📍 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 뿐 아니라 배열, 객체, 다 가능합니다

useState로 숫자카운터 구현해보기

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 정복띠!😍