복습하면서 알게된점

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  // change
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

리액트의 useCallback 훅의 종속성 배열이 빈 배열([])로 전달되면,

해당 함수는 컴포넌트가 렌더링될 때 한 번만 생성되고, 이후에는 동일한 함수 인스턴스를 계속해서 재사용하게 된다.

따라서, onChange 함수가 useCallback 훅에 의해 감싸져 있고, 종속성 배열이 빈 배열([])로 전달되었다면, onChange 함수는 컴포넌트가 마운트될 때 한 번만 생성되고 이후에는 동일한 함수 인스턴스를 계속해서 재사용하게 된다.

 

반대로, 종속성 배열에 어떤 값이라도 포함되어 있다면, 해당 값이 변경될 때마다 함수가 새로 생성되게 된다.

이는 종속성 배열에 포함된 값이 변경되는 경우에만 함수를 새로 생성하고 그렇지 않은 경우에는 이전에 생성된 함수를 재사용하게 된다. 이를 통해 불필요한 함수 생성을 방지하고 성능을 최적화할 수 있다.

 

리액트(React)는 자바스크립트 라이브러리로,

클래스 컴포넌트나 함수 컴포넌트를 사용하여 UI(User Interface)를 구성한다.

리액트에서는 컴포넌트를 기반으로 인스턴스가 생성되어 화면에 렌더링되는 것이 일반적이다.

 

함수 컴포넌트를 사용할 경우, 함수를 정의하여 컴포넌트를 생성한다.

이때 함수는 컴포넌트의 템플릿 역할을 하며, 함수가 호출되어 반환하는 값이 컴포넌트의 인스턴스로 간주된다.

이렇게 생성된 함수 컴포넌트의 인스턴스가 리액트에서 사용되어 화면에 렌더링된다.

따라서 리액트에서 인스턴스는 클래스 컴포넌트나 함수 컴포넌트를 기반으로 생성된 실제 UI 요소를 의미한다.