[React Hook] UseState

2020-04-03REACT

useState Hook 함수

Class없이 상태 값과 여러 리액트 기능 사용 가능함
리액트는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공함 count 변수의 값을 갱신하려면 setCount를 호출하면 됨.
useState Hook을 이용하면 state변수와 해당 state를 갱신할 수 있는 함수가 만들어짐
useState의 인자의 값으로 0을 넘겨주면 count값을 0으로 초기화할 수 있음
리액트는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링함

함수형 컴포넌트 코드 살펴보기

// useState Hook을 React에서 가져오기
import React, { useState } from "react";

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부름.
  // state 변수와
  const [count, setCount] = useState(0);

  return (
    <div>
      <p> You clicked {count} times </p>
      // 사용자가 버튼을 클릭하면 setCount 함수 호출하여 state 변수 갱신
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Hook과 같은 기능을 하는 클래스 컴포넌트

state는 { count : 0}
사용자가 this.setState()를 호출하는 버튼을 클릭했을 때 state.count 증가시킴

클래스 컴포넌트 코드 살펴보기

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p> You clicked {this.state.count} times </p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
      </div>
    );
  }
}

클래스 컴포넌트와 함수형 컴포넌트 비교하기

state 가져오기

클래스 컴포넌트 : count를 보여주기 위해서 this.state.count 사용

<p> You clicked {this.state.count} time </p>

함수 컴포넌트 : count 직접 사용

<p> You clicked {count} time </p>

state 갱신하기

클래스 컴포넌트 : count를 갱신하기 위해서 this.setState() 호출

<button onClick={() => this.setCount({count : this.state.count + 1})}>

함수 컴포넌트 : setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 됨

<button onClick={() => setCount(count + 1)}>Click me</button>