[React Hooks - 1] useState

React Hooks 첫번째 공부!!

제일 기본이 되는 useState에 대해서 공부해 봅니다.

// useState는 react로 부터 import 받을 수 있습니다.
import { useState } from "react";
// useState의 첫번째 인자는 최초 값을 설정합니다. 그 값은 배열의 첫번째 값(item)에 할당 됩니다.
// setItem은 첫번째 값을 바꿀 수 있는 함수를 나타냅니다. 
 const [item, setItem] = useState(0);

전체 소스

import React, { StrictMode, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

// Hooks를 사용한 경우
const App = () => {
  const [item, setItem] = useState(0);
  const increaseItem = () => setItem(item + 1);
  const decreaseItem = () => setItem(item - 1);

  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={increaseItem}>Increase</button>
      <button onClick={decreaseItem}>Decrease</button>
    </div>
  );
};

// Hooks를 사용하지 않은 경우
class AppUgly extends React.Component {
  state = {
    item: 1
  };

  render() {
    const { item } = this.state;

    increaseItem = () => {
      this.setState((state) => {
        return {
          item: state.item + 1
        };
      });
    };

    decreaseItem = () => {
      this.setState((state) => {
        return {
          item: state.item - 1
        };
      });
    };

    return (
      <div className="App">
        <h1>New Hello {item}</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={increaseItem}>Increase</button>
        <button onClick={decreaseItem}>Decrease</button>
      </div>
    );
  }
}

// 구분자
const Divider = () => {
  return <div className="divider"></div>;
};

// 결과 표시
const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
    <Divider />
    <AppUgly />
  </StrictMode>,
  rootElement
);

결과 화면

• 위와 아래 모두 같은 기능이 정상적으로 작동합니다.
• 기존에 사용하였던 React.component 형태의 class 소스보다 월등히 적은 소스를 보여주고, 직관적으로 표시되기도 합니다.
• React.component의 경우 this와 아닌 경우 등을 잘 구분해서 사용해야하지만, hooks는 this 없이 사용 가능합니다.
  

이상 오늘도 즐거운 react study!!!