Custom Hook에 관해 질문이 있습니다!

처음 만난 리액트(React)

해결된 질문

작성

127

안녕하세요. 소플님.

Custom Hook에 대해서 질문이 있어 글을 남깁니다.

import {useState, useEffect} from 'react';

// 커스텀 훅
function useUserStatus(userId){
	const [isOnline, setIsOnline] = useState(null);
	
	useEffect(() =>{
		function handleStatusChange(status){
			setIsOnline(status.isOnline);
		}
		
		ServerAPI.subscribeUserStatus(userId, handleStatusChange);
		return () =>{
			ServerAPI.unsubscribeUserStatus(userId, handleStatusChange);
		}
	});
	
	return isOnline;
}

function UserStatus(props){
	// 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용
	const isOnline = useUserStatus(props.user.id);
	
	if (isOnline == null)
		return "대기중...";
	
	return isOnline ? '온라인' : '오프라인'; 
}

function UserListItems(props){
	// 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용
	const isOnline = useUserStatus(props.user.id);
	
	return (
		<li style={{color: isOnline ? 'green':'black'}} >
			{props.user.name}
		</li>
	);
}

위 방식은 강의 내용대로 중복된 로직을 추출하여 Custom Hook을 만들고 함수 컴포넌트 내에서 호출하여 사용하는 방식입니다.

강의 내에서 " 여러 개의 컴포넌트에서 하나의 공통된 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다." 라고 말씀하셨는데 Custom Hook도 본질은 JS함수이기에 함수의 선언의 parameter와 사용의 argument는 다른 것과 같기 때문으로 이해해도 될까요?

좋은 리액트 강의 감사합니다. 꼭 완강하겠습니다!

HTML/CSS javascript react

답변 2

Inje Lee (소플)

지식공유자

안녕하세요, 소플입니다.

말씀하신대로 커스텀 훅도 본질은 자바스크립트 함수이기 때문에,

내부에서 사용하는 state나 effects 등은 모두 분리되어 있다고 이해하시면 됩니다.

예를 들어, 직접 만든 useCustomHook이라는 훅 내부에서 useState 훅을 사용한다면,

useCustomHook이 각기 다른 컴포넌트에서 호출 될 때마다 각각의 state가 생기는 것이죠.

이후 학습하다가 궁금한 점이 있다면 언제든지 질문 남겨주시고, 끝까지 꼭 완강하시길 바랍니다!

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

이지민님께서 질문하신 Custom Hook에 대한 개념과 특성에 관한 답변을 제공해 드리고자 합니다. 특히, Custom Hook이 여러 컴포넌트에서 사용될 때 각 컴포넌트 내부의 state와 effects가 분리되어 있음에 대한 부분에 대해 궁금해하신 것 같습니다.

이와 관련하여 다음 답변을 참고하시면 도움이 될 것 같습니다.

useEffect() 안에 함수를 정의하는 이유가 무엇인가요?

이 답변에서는 useEffect의 사용법과 그 안에서 함수를 선언하는 이유를 자세하게 설명하고 있습니다. 커스텀 훅에서 언급한 useEffect의 동작 방식과, 이를 통해 훅 내부에서 발생하는 이벤트 핸들러의 관리 방법 등을 살펴보실 수 있습니다. Custom Hook은 본질적으로 JavaScript 함수입니다. 이 함수는 로직을 재사용 가능한 형태로 캡슐화하는 데 사용되며, 각 컴포넌트에서 호출될 때 독립적인 스코프와 상태를 가지게 됩니다. 이 특성 때문에 한 Custom Hook이 여러 컴포넌트에 걸쳐 사용되더라도, 각각의 컴포넌트은 서로 다른 상태를 유지할 수 있습니다.

Custom Hook 내에서 사용한 useState와 useEffect와 같은 React Hook이 각 컴포넌트 인스턴스별로 독립적인 상태와 사이드 이펙트를 관리하는 방법은, 말씀하신 것처럼 JavaScript 함수의 선언 및 호출 시 파라미터와 아규먼트가 각각 독립적인 값이나 참조를 갖는 것과 유사한 논리로 설명될 수 있습니다. 즉, 각 컴포넌트에서 Custom Hook을 호출할 때 전달하는 인자(이 예제의 userId)에 따라 내부적으로 생성되는 상태(isOnline)나 사이드 이펙트가 관리되며, 이는 Hook이 호출된 각 컴포넌트의 컨텍스트 내에서 독립적으로 작동하게 됩니다.

좋은 강의에 대한 이지민님의 만족과 앞으로의 학습에 대한 열정이 느껴집니다. 완강을 향한 응원의 메시지도 전달드리고 싶습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Custom Hook에 관해 질문이 있습니다!