React Custom Hook에 대하여

React Hook이란?

 React Hook은 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능이다. 기존 클래스형 컴포넌트의 복잡성을 줄이고, 함수형 컴포넌트의 재사용성과 가독성을 높여준다. 대표적인 Hook으로는 useState, useEffect, useContext 등이 있으며, 사용자 정의 Hook(Custom Hook)을 통해 비즈니스 로직을 보다 깔끔하게 관리할 수 있다.

Hook을 사용하는 이유

 Hook을 사용하는 주요 이유는 비즈니스 로직의 분리, 관심사 분리, 캡슐화, 그리고 로컬 상태 관리 등 여러 측면에서의 이점 때문이다.

1. 비즈니스 로직의 분리

 Hook을 사용하면 비즈니스 로직을 컴포넌트 외부로 분리하여 재사용 가능한 코드로 만들 수 있다. 이를 통해 중복된 코드를 줄이고, 로직을 독립적으로 테스트할 수 있는 환경을 제공한다.

2. 관심사의 분리

 React 애플리케이션에서 여러 컴포넌트가 각각의 관심사에 따라 로직을 다루게 된다. Hook은 이를 쉽게 분리할 수 있게 해준다. 예를 들어, 데이터 가져오기, 폼 처리, 애니메이션 등 각기 다른 관심사를 담당하는 Hook을 만들면 코드의 가독성이 좋아지고 유지보수가 용이해진다.

3. 캡슐화

 Hook은 컴포넌트 내부에서 특정 로직을 캡슐화하여 외부에 노출되지 않도록 한다. 이렇게 하면 다른 컴포넌트에서 내부 구현에 의존하지 않고, 필요한 기능만 사용할 수 있어 컴포넌트의 재사용성과 독립성이 높아진다.

4. 로컬하게 상태를 유지

 Hook을 사용하면 컴포넌트 내에서 로컬 상태를 쉽게 관리할 수 있다. 이는 특정 컴포넌트가 자신만의 상태를 독립적으로 가지면서도, 필요에 따라 상위 컴포넌트와 상태를 공유할 수 있게 해준다.

Custom Hook의 반환값: 배열 vs 객체

 Custom Hook은 비즈니스 로직을 캡슐화하여 컴포넌트 간에 공유할 수 있는 기능을 제공한다. 이때 Custom Hook은 배열 혹은 객체를 반환할 수 있으며, 둘 다 참조형 변수이지만 사용 방법과 장단점은 다르다.

1. 배열로 반환하는 경우

• 단순함: Custom Hook이 관리하는 값이나 함수가 2~3개 정도로 적을 때, 배열을 반환하면 간단하게 사용할 수 있다. 배열 구조분해 할당을 통해 간결한 코드 작성이 가능하다.

• 순서 의존성: 배열로 반환할 경우, 반환되는 값의 순서에 의존하게 된다. 따라서 반환값의 순서가 바뀌면 사용하는 쪽에서도 코드를 수정해야 한다는 단점이 있다.

const useCounter = (initialCount) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return [count, increment, decrement];
};

2. 객체로 반환하는 경우

• 명확한 속성명: 객체로 반환하면 각각의 속성에 이름을 부여할 수 있어, 코드의 가독성과 유지보수성이 높아진다. 객체 구조분해 할당을 통해 필요한 값만 선택적으로 사용할 수도 있다.

• 확장성: 객체는 속성을 추가하거나 삭제하는 것이 쉬워, 기능이 확장될 가능성이 있는 경우 유리하다.

const useForm = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };

  return {
    formData,
    handleChange
  };
};

Hook의 인스턴스화와 로컬 사용

 Hook은 함수이기 때문에 컴포넌트 내부에서 호출되면 그 컴포넌트에서만 사용할 수 있는 로컬한 인스턴스를 생성한다. 이는 같은 Custom Hook을 여러 컴포넌트에서 사용해도 각각 독립된 상태를 관리할 수 있게 해준다. 이러한 특성 덕분에 Hook을 활용한 로직은 여러 곳에서 재사용이 가능하며, 다른 컴포넌트에 영향을 주지 않고 독립적으로 동작할 수 있다.

예를 들어, useCounter Hook을 두 개의 다른 컴포넌트에서 사용하면, 각각의 컴포넌트는 자신만의 count 상태를 가지며 독립적으로 증가하거나 감소할 수 있다. 이는 컴포넌트 기반 설계의 장점인 캡슐화와 맞물려, 코드의 독립성과 모듈화된 구조를 유지하는 데 기여한다.

결론

 React의 Custom Hook은 비즈니스 로직을 캡슐화하고 재사용할 수 있게 해주는 강력한 도구이다. Hook을 활용하면 관심사에 따라 코드를 분리하고, 상태 관리 로직을 깔끔하게 유지할 수 있다. 배열과 객체를 반환하는 방식은 각각의 특성과 용도에 맞게 선택하여 사용하면 된다. Custom Hook을 통해 코드의 유지보수성과 확장성을 높이고, React 애플리케이션을 보다 효율적으로 개발할 수 있다.