[react] 11. useState & custom hooks

안녕하세요! 오늘은 useState를 사용하여 custom hooks를 만들어 사용하는 것을 정리해보려고 합니다. 저는 nomad coders 강의를 통해 공부하고 글을 정리해보았습니다.

💎 useState

아래 코드는 useState를 사용하여 구현한 count 코드입니다. useState를 사용하여 초기값을 0으로 지정하여 줍니다. 그리고 setCount를 사용하여 값을 업데이트 하여 줍니다.

import { React, useState } from "react";

const Count = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);

  return (
    <div>
      <h1>Current Count {count}</h1>
      <button onClick={incrementCount}> up </button>
      <button onClick={decrementCount}> down </button>
    </div>
  );
};

export default Count;

💎 useInput

useState를 기반으로 아래와 같이 useInput hooks를 만들어 사용할 수 있는데요! useInput을 사용하면 처리할 값에 길이 검증이나 특정 값의 포함여부에 따른 조건부 처리가 가능합니다.

export const useInput = (initValue) => {
  const [value, setValue] = useState(initValue);

  const onChange = (e) => {
    const {
      target: { value },
    } = e;
    setValue(value);
  };
  return { value, onChange };
};

아래 코드는 이름을 입력하는<input /> 에 useInput을 적용한 코드입니다.

import React from "react";
import { useInput } from "./hooks/customHooks";
const HooksStudy = () => {
 const name = useInput("우든");
 return (
   <div>
     <h1>useInput</h1>
     <input placeholder="name" value={name.value} 
	onChange={name.onChange} />
   </div>
 );
};

export default HooksStudy;

추가적으로 <input /> props를 {}를 사용하여 좀 더 간결하게 사용할 수 있어요!

const name=useInput("우든")
<input placeholder="name" {...name} />

또한,useInput에 유효성 검증을 추가하여 사용할 수 있는데요!
아래 예시는 email을 입력받는 <input />에 validate 기능을 추가하여 사용할 수 있어요!

먼저 아래와 같이 useInput에 인자로 validator을 추가하여 줍니다.
해당 validator type이 함수인지 검사한 후 에 함수가 맞다면 해당 함수의 리턴값을 willUpdate 변수에 저장하여 줍니다.

export const useInput = (initValue, validator) => {
  const [value, setValue] = useState(initValue);

  const onChange = (e) => {
    const {
      target: { value },
    } = e;

    let willUpdate = false;

    if (typeof validator === "function") {
      willUpdate = validator(value);

      console.log(willUpdate);
    }

    if (willUpdate) {
      setValue(value);
    }

    setValue(value);
  };
  return { value, onChange };
};

아래 화면은 validator 조건에 따른 값을 확인해본 화면입니다!

💎 useTabs

두번째는 useState를 사용하여 다른 내용을 보여주는 useTabs를 만들어보도록 하겠습니다.

const useTabs = (initTabIndex, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initTabIndex);

  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex,
  };
};

만들어준 useTabs를 적용해보도록 하겠습니다. 먼저 아래와 같이 데이터를 만들어 줍니다.

  const allTabs = [
    {
      tab: "우든",
      contents: "안녕하세요! 우든입니다.",
    },
    {
      tab: "수봉",
      contents: "안녕하세요! 수봉입니다.",
    },
  ];

아래와 같이 적용하여 줍니다.

<h1>useTabs</h1>
<button onClick={() => changeItem(0)}>우든</button>
<button onClick={() => changeItem(1)}>수봉</button>
<p>{currentItem.contents}</p>

마무리

useState를 사용하여 useInput과 useTabs hooks를 만들어 사용해봤는데요! 직접 만들어 사용해보니 어떤 구조를 가지고 있고 어떻게 동작하는지에 대해 이해할 수 있었습니다!