/ STUDY

실전형 React Hooks 10개 (1) - UseState

목차

useState()

useState()는 변수를 생성하고 제어하는 과정을 한 줄의 코드로 구현할 수 있는 도구다.

const [item, setItem] = useState("initial item");

위 한 줄의 코드로 item이라는 변수를 생성하고, setItem을 통해 item이라는 변수의 변화를 제어할 수 있다. 프로젝트를 진행하면서 가장 많이 사용한 코드 중에 하나로, 지금까지의 경험으로 봤을 때는 가장 사용량이 많은 도구라고 생각하기 때문에 아래 useState 전후 코드를 통해 useState의 기능에 대해 이해하는 것이 가장 중요하다고 생각한다.

기존과 차이

Without useState()

지금까지 class component에서 state 그리고 setState를 통해 데이터를 관리했다.

class AppAgly extends React.component {
  state = {
    item: 0,
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Number of item is {item}</h1>
        <button onClick={IncrementElement}>Increment</button>
        <button onClick={DecrementElement}>Decrement</button>
      </div>
    );
  }
  IncrementElement = () => {
    this.setState((state) => {
      return {
        item: state.item + 1,
      };
    });
  };
  DecrementElement = () => {
    this.setState((state) => {
      return {
        item: state.item -1 1,
      };
    });
  };
}

With useState()

하지만 React에서 더 쉽게 동적인 데이터를 관리하는 방법이 있다. 바로 useState라는 함수이다.

import { useState } from "react";

const App = () => {
  const [item, setItem] = useState(1);
  const Increment = setItem(item + 1);
  const Decrement = setItem(item - 1);
  return (
    <div className="App">
      <h1>Number of item is {item}</h1>
      <button onClick={IncrementElement}>Increment</button>
      <button onClick={DecrementElement}>Decrement</button>
    </div>
  );
};

적용 예시

useInput

구현 기능 : Input에 대해 조건 부여하기

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };
  return { value, onChange };
};

useTabs

구현 기능 : 새로운 정보 가져오고 보여주기

const useTabs = (initialTab, allTabs) => {
  if (!allTaabs || Array.isArray(allTabs)) {
    return;
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex,
  };
};