230630 React Custom hooks로 로직 분리하기

230630 React Custom hooks로 로직 분리하기

리액트에서 컴포넌트는 재사용을 위한 하나의 요소이다. 컴포넌트가 로직과 UI를 모두 포함하는 컴포넌트는 디자인을 수정하기 힘들고 디자인을 위한 코드와 로직을 위한 코드가 섞여서 유지보수하기 불편한 점이 있다. 같은 기능이지만 디자인이 다른 컴포넌트를 만들기 위해서 번거롭게 완전 동일한 컴포넌트를 또 만들거나 내부에서 props를 통해 조건부 렌더링을 하면 컴포넌트가 많아질수록 힘들어진다. 이럴 때는 로직과 UI를 분리하여 사용할 수 있다.

 

Custom hooks로 input 로직 만들기

가장 보편적으로 사용하는 inputText에서는 value와 onChange 이벤트를 사용하여 input을 조작할 수 있다.

import { useState } from "react";

function useInputText(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange
  };
}

export default useInputText;

import { useState } from "react";

function useInputRadio(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const isChecked = (compareValue) => value === compareValue;

  return {
    value,
    onChange: handleChange,
    isChecked
  };
}

export default useInputRadio;

 

import useInputRadio from "./useInputRadio";
import useInputText from "./useInputText";

export default function App() {
  const { value: name, onChange: onChangeName } = useInputText("");
  const inputPassword = useInputText("");
  const inputRadio = useInputRadio("man");

  return (
    <div className="App">
      <div>
        <label htmlFor="inputName">Name: </label>
        <input
          type="text"
          name="inputName"
          value={name}
          onChange={onChangeName}
        />
      </div>
      <div>
        <label htmlFor="inputPassword">Password: </label>
        <input type="password" name="inputPassword" {...inputPassword} />
      </div>
      <fieldset>
        <legend>Choose Gender: </legend>
        <input
          type="radio"
          id="woman"
          name="gender"
          value="woman"
          checked={inputRadio.isChecked("woman")}
          onChange={inputRadio.onChange}
        />
        <label htmlFor="woman">woman</label>
        <input
          type="radio"
          id="man"
          name="gender"
          value="man"
          checked={inputRadio.isChecked("man")}
          onChange={inputRadio.onChange}
        />
        <label htmlFor="man">man</label>
      </fieldset>
    </div>
  );
}