React Hooks : useState

hooks

functional components인데 state를 쓸 수 있게 함. 따라서 class components를 사용하지 않아도 됨

=> 함수형 프로그래밍 스타일로 코딩가능

다음을 일반적인 클래스 컴포넌트이다.

import React from "react"; class App extends React.Component { state = { count: 0 }; plus = () => { this.setState({ count: this.state.count + 1 }); }; render() { const { count } = this.state; return ( {count} PLUS ); } } export default App;

위와 같은 클래스 컴포넌트를 Hook으로 고쳐보았다.

import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); return ( <> {count} setCount(count + 1)}>Plus ); } export default App;

useState

위의 예시에서 const [count, setCount] = useState(0); 의 의미를 좀 알아보자.

useState는 항상 2개의 요소가 있는 array이다. 첫번째는 value, 두번째는 value를 변경하는 방법을 의미한다.

또한, useState(0); 은 첫번째 value의 값이 0임을 의미한다.

from http://darrengwon.tistory.com/174 by ccl(A) rewrite - 2020-03-20 22:20:15