[강의노트] Hooks - useState

Tia Hwang·2020년 4월 20일
0

[Nomad] React Hooks

목록 보기
2/6

1. hooks

  • react의 state machine에 연결하는 기본적인 방법

2. useState()

  • 항상 2개의 value를 return
  • InitialState를 세팅할 수 있는 옵션 제공
const [item, setItem] = useState(1);
  • array를 return 해야함
    • array의 첫번째 요소는 item, 두번째 요소는 setItem
  • 한가지만 사용하고 싶을 경우에는 아래와 같이 사용
const item = useState(1)[0]
const item = useState(1)[1]
  • 사용예제
import React, { useState } from "react";

const App = () => {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h3>Here we go!</h3>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
};

export default App;
  • Hooks을 사용하지 않고, class component로 코딩했을때
import React from "react";

class AppUgly extends React.Component {
  state = {
    item: 1
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Hello {item}</h1>
        <h3>Here we go!</h3>
        <button onClick={this.incrementItem}>Increment</button>
        <button onClick={this.decrementItem}>Decrement</button>
      </div>
    );
  }
  incrementItem = () => {
    this.setState(state => {
      return {
        item: state.item + 1
      };
    });
  };
  decrementItem = () => {
    this.setState(state => {
      return {
        item: state.item - 1
      };
    });
  };
}

export default AppUgly;
profile
프론트엔드 개발자로 취업하기

0개의 댓글