React Props: setState와 함수 시그니처의 차이점

//함수 시그니처
interface ModalProps {
  setIsModalOpen: (isOpen: boolean) => void; 
}
 
// setState
interface ModalProps {
  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
}

두 타입은 비슷해 보이지만 중요한 차이점이 있다. 사용 의도와 동작에 따라 적합한 상황이 나뉘며, 아래에서 각각의 의미를 설명하겠다.

1. setIsModalOpen: (isOpen: boolean) => void

이 타입은 함수 시그니처를 정의한다. setIsModalOpen은 단순히 boolean 값을 받아서 특정 작업을 수행하는 함수이다.

예시:

const handleModalToggle = (isOpen: boolean) => {
  console.log(`Modal is now ${isOpen ? "open" : "closed"}`);
};

사용 시나리오:

• 값을 단순히 업데이트하거나 전달만 할 때 유용하다.
• useState가 아닌 다른 방식으로 상태를 관리하거나, 외부에서 상태 관리 로직이 구현된 경우 자주 사용된다.
• 함수 내부에서 상태 변경 외 추가 로직을 처리해야 할 때.

예제 코드:

type Props = {
  setIsModalOpen: (isOpen: boolean) => void;
};
 
const ModalToggleButton: React.FC<Props> = ({ setIsModalOpen }) => (
  <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
);

---

2. setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>

이 타입은 useState의 상태 변경 함수를 그대로 사용하는 경우에 해당한다. React의 상태 관리에서 setState 함수는 React.Dispatch<React.SetStateAction<T>> 타입을 가진다.

특징:

• setIsModalOpen이 boolean 값 자체 또는 boolean 값을 반환하는 함수(즉, 업데이트 로직)를 받을 수 있다.
• 이를 통해 상태 업데이트 방식을 더 유연하게 처리할 수 있다.

예시:

const [isModalOpen, setIsModalOpen] = useState(false);
 
// setState를 그대로 Prop으로 전달
<ModalToggleButton setIsModalOpen={setIsModalOpen} />;
 
const ModalToggleButton = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
  return (
    <button onClick={() => setIsModalOpen((prev) => !prev)}>Toggle Modal</button>
  );
};

사용 시나리오:

• React 상태 관리에 최적화된 방식으로, useState의 상태 변경 함수를 그대로 Prop으로 전달하려는 경우 사용한다.
• useState에서 제공하는 업데이트 함수와 현재 상태를 기반으로 값 계산이 필요할 때 유용하다.

---

주요 차이점

구분	(isOpen: boolean) => void	React.Dispatch<React.SetStateAction<boolean>>
역할	단순히 boolean 값을 받아 처리하는 일반 함수	useState와 동일한 상태 변경 함수
유연성	단순히 새로운 값을 설정해야 할 때 적합	현재 상태를 기반으로 새 값을 계산하거나 업데이트할 때 유리
함수 호출 방식	setIsModalOpen(true)	setIsModalOpen((prev) => !prev)
React와의 결합	React 상태 관리와 직접적 연결 없음	React 상태 관리(useState)와 밀접한 연결

---

결론

• (isOpen: boolean) => void: 단순히 값을 설정하거나 비즈니스 로직이 Prop으로 전달된 함수에 포함되어야 하는 경우.
• React.Dispatch<React.SetStateAction<boolean>>: useState 상태 변경 함수를 Prop으로 전달할 때 사용.

상황에 따라 적합한 방식을 선택하세요!