리액트 훅에 반환 값이 필요할까요?
결론부터 말하면 꼭 필요하지는 않습니다.
리액트 애플리케이션에서 최근에 커스텀 훅을 만들기 시작했다면, 훅이 반환 값을 가져야 하는지 궁금해 할 수 있습니다. 공식 리액트 문서에서는 훅이 반드시 무언가를 반환해야 한다고 명시적으로 언급하지는 않습니다. 그러나 훅의 반환 값의 목적과 리액트 컴포넌트의 라이프사이클에 어떤 영향을 미치는지 이해하는 것이 중요합니다.
커스텀 훅이 초기화 과정에서 Redux에 데이터를 설정하는 경우, 반환 값이 없어도 올바른 접근입니다. 훅에 전달된 함수의 반환 값은 리액트 컴포넌트 라이프사이클에서 특수한 용도로 사용됩니다. 이 반환 값은 컴포넌트가 다시 렌더링되거나 언마운트되기 전에 정리 작업을 수행하는 함수로 기대됩니다.
리액트 문서에서는 이러한 유형의 훅을 “정리 작업을 포함한 효과”라고 언급합니다. 이 개념을 설명하기 위해 다음 예제를 살펴보겠습니다:
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
// 여기에 설정 로직 작성
// 정리 함수
return () => {
// 여기에서 리소스를 정리하거나 구독을 해제합니다.
};
}, []);
return (
// 컴포넌트 JSX
);
};
위의 예제에서 useEffect에 전달된 익명 함수는 아무것도 반환하지 않습니다. 대신, 컴포넌트가 다시 렌더링되거나 언마운트되기 전에 실행되는 정리 함수를 정의합니다. 이 정리 함수 내에서 리소스 해제 또는 구독 해제와 같은 필요한 정리 작업을 수행할 수 있습니다.
훅의 반환 값이 어떻게 활용되는지와 모든 경우에 필요하지 않은 이유를 확인하기 위해 훅의 반환 값을 로깅해보면 쉽게 확인할 수 있습니다. 반환문이 없는 경우, 반환 값은 “undefined”로 로깅됩니다. 하지만 함수가 포함된 반환문이 있다면, 필요할 때 정리 함수로 실행됩니다.
const MyHook = () => {
console.log('유용한 정보');
return () => {
console.log('정리 로직');
};
};
console.log(MyHook()); // "정리 로직" 출력
위의 동작을 관찰하여, 훅의 반환 값이 어떻게 활용되는지와 왜 모든 경우에 필요하지 않은지를 볼 수 있습니다.
요약하면, 모든 시나리오에서 리액트 훅은 반환 값이 없어도 됩니다. 반환 값은 컴포넌트 라이프사이클 내에서 정리 함수로 특정 용도로 사용됩니다. 커스텀 훅이 초기화 작업을 수행하거나 다른 컴포넌트에 데이터를 설정하는 경우, 훅이 반환 값을 생략하는 것은 완전히 유효합니다.
위에서 설명한 원칙을 염두에 두고, 리액트 훅과 커스텀 훅 개발에 대한 다양한 사용 사례를 탐색해보세요.
참고 자료 :
https://stackoverflow.com/questions/62148155/do-react-hooks-need-to-return-a-value
같은 카테고리의 다른 글 보기 :
