사용자 지정 반응 후크: useArray

또 한 주, 후크 백팩을 위한 또 다른 맞춤형 React 후크입니다. 이 에피소드에서는 어레이 관리를 더 쉽게 하기 위해 useArray 후크를 구현합니다. 준비가 된? 갑시다! 😎

Motivation

Implementation

Usage

Improvement Ideas

Conclusion

동기 부여

늘 그렇듯이 먼저 이 후크가 어떻게 유용할 수 있는지 알아보겠습니다. 독창적이고 창의적이 되십시오. React로 To-Do 목록 애플리케이션을 구축한다고 가정해 보겠습니다. 언젠가는 사용자의 작업을 관리해야 합니다. 그렇게 하려면 useState 후크와 함께 배열을 사용합니다. addTask 함수는 다음과 같습니다.

const addTask = (newTask) => {
  setTasks(oldTasks => [...oldTasks, newTasks])
}

그러면 다음과 같은 removeTask 함수가 생깁니다.

const removeTask = (index) => {
  setTasks(oldTasks => oldTasks.filter((_, i) => i !== index))
}

보시다시피 이것은 읽기가 약간 어려워 질 수 있습니다.

이것이 코드를 단순화하기 위해 useArray 후크를 만드는 이유입니다.

구현

먼저 후크의 기본 구조를 만들어 봅시다.

const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue)

  return { value, setValue }
}

그런 다음 push 함수를 추가하여 배열 끝에 요소를 추가합니다.

const push = element => {
  setValue(oldValue => [...oldValue, element]);
};

주어진 인덱스에서 요소를 제거하는 remove 함수도 만들어 보겠습니다.

const remove = index => {
  setValue(oldValue => oldValue.filter((_, i) => i !== index));
};

isEmpty 함수를 추가하여 배열이 비어 있는지 확인하는 것도 편리할 수 있습니다.

  const isEmpty = () => value.length === 0;

이 모든 기능을 함께 결합하면 최종 후크는 다음과 같습니다.

const useArray = (initialValue = []) => {
  const [value, setValue] = useState(initialValue);

  const push = element => {
    setValue(oldValue => [...oldValue, element]);
  };

  const remove = index => {
    setValue(oldValue => oldValue.filter((_, i) => i !== index));
  };

  const isEmpty = () => value.length === 0;

  return { value, setValue, push, remove, isEmpty };
};

많은 양의 데이터로 작업하는 경우 useCallback(추가 정보here )를 사용하여 이 후크를 자유롭게 최적화하십시오.

Example:

const push = useCallback(element => {
  setValue(oldValue => [...oldValue, element])
}, [])

또한 map 또는 unshift 와 같은 다른 배열 방법이 필요한 경우 주저하지 말고 필요에 맞게 조정하십시오(사용자 지정 함수를 추가할 수도 있음).

용법

할 일 목록 예제로 돌아가십시오. 우리의 새로운 후크를 사용하면 이제 구성 요소가 다음과 같이 보일 수 있습니다.

const TodoList = () => {
  const tasks = useArray([]);
  const [newTask, setNewTask] = useState("");

  // "Add" button clicked
  const handleSubmit = e => {
    e.preventDefault();
    tasks.push(newTask);
    setNewTask("");
  };

  const handleInputChange = e => setNewTask(e.target.value);

  return (
    <>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={newTask} onChange={handleInputChange} />
        <button>Add</button>
      </form>
      {tasks.isEmpty() ? (
        <p>No tasks to display</p>
      ) : (
        <ul>
          {tasks.value.map((task, index) => (
            <li key={index}>
              <input
                type="checkbox"
                onClick={() => tasks.remove(index)}
                checked={false}
              />
              {task}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};

addTask 및 removeTask 함수는 이미 명시적이고 읽기 쉽기 때문에 tasks.push 및 tasks.remove 함수가 더 이상 필요하지 않습니다.

개선 아이디어

더 나아가 이 훅을 향상시키기 위한 몇 가지 개선 아이디어가 있습니다.

배열을 뒤집는 reverse 함수 추가

배열을 정렬하는 sort 함수 추가

어레이를 지우는 clear 함수 추가

결론

이 훅이 미래(또는 기존) 프로젝트에 유용하기를 바랍니다. 질문이 있으시면 의견 섹션에서 자유롭게 질문하십시오.

저를 읽어 주셔서 감사합니다. 다음에 새로운 사용자 정의 후크로 만나요. 🤗


소스 코드는 CodeSandbox에서 사용할 수 있습니다.

지원 해줘

저를 지원하고 싶으시면 다음 링크로 저에게 커피를 사주실 수 있습니다.