[typescript] JSX에서 컴포넌트의 이벤트 전파 방법

18 Dec 2023

typescript

JSX에서 이벤트를 처리하다보면, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달해야 하는 경우가 있습니다. 이러한 이벤트 전파를 어떻게 할 수 있는지 살펴보겠습니다.

1. Props를 통한 이벤트 전달

부모 컴포넌트에서 자식 컴포넌트로 콜백 함수를 props로 전달하고, 자식 컴포넌트에서 해당 콜백 함수를 호출하는 방식으로 이벤트를 전달할 수 있습니다.

// 부모 컴포넌트
const ParentComponent = () => {
  const handleChildClick = () => {
    // 부모 컴포넌트에서 처리할 로직 작성
  }

  return <ChildComponent onClick={handleChildClick} />;
}

// 자식 컴포넌트
const ChildComponent = ({ onClick }: { onClick: () => void }) => {
  return <button onClick={onClick}>Click me</button>;
}

2. Context API를 활용한 이벤트 전파

Context API를 사용하여 전역적으로 상태를 관리하는 경우, 이벤트 처리를 부모 컴포넌트에서 정의하고 자식 컴포넌트에서 해당 이벤트를 사용할 수 있습니다.

// 부모 컴포넌트
const MyContext = React.createContext<{ handleButtonClick: () => void }>({
  handleButtonClick: () => {},
});

const ParentComponent = () => {
  const handleButtonClick = () => {
    // 부모 컴포넌트에서 처리할 로직 작성
  }

  return (
    <MyContext.Provider value={{ handleButtonClick }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 자식 컴포넌트
const ChildComponent = () => {
  const { handleButtonClick } = React.useContext(MyContext);

  return <button onClick={handleButtonClick}>Click me</button>;
}

결론

이러한 방법을 활용하여 JSX에서 컴포넌트의 이벤트를 효율적으로 전파할 수 있습니다. 각 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.

더 많은 정보는 React 공식 문서를 참고할 수 있습니다.