공통 컴포넌트 이벤트 적용 안되는 현상

 

문제 상황

 import { ContainerBox } from "../../common/searchCharacter/ContainerBox";
 
 const handleMouseLeave = () => {
    if (!clicked) {
      setSelectedItem(null);
    }
  };

  return (
    <ContainerBox onMouseOut={handleMouseLeave}>
    </ContainerBox>
  );
};

 

containerBox 컴포넌트에 onMouseOut 이벤트를 넣어서 컴포넌트를 벗어나면

setSelectedItem(null)로 초기화 시키는 작업을 하려고 했는데

 

전혀 적용이 안되는 문제가 생겼다.

 

 

 

 

해결 과정

 

제일 먼저 정공법인 console.log를 사용하여 함수 호출 여부를 확인한다.

const handleMouseLeave = () => {
  console.log("마우스 오버 상태");
  if (!clicked) {
    setSelectedItem(null);
  }
};

 

이렇게 해도 콘솔에 안 찍힌다.

 

다음.

 

 

 

ContainerBox의 구조 확인하기

 

ContainerBox는 재사용 가능한 공통 컴포넌트로, 내부적으로 HTML 요소를 감싸는 구조이다.

import React from 'react';
import styled from 'styled-components';

export const ContainerBox = ({ children }) => {
  return <Wrap}>{children}</Wrap>;
};

const Wrap = styled.div`
  display: flex;
  flex-direction: column;
 `

이런 식으로 코드가 구성되어 있다.

 

ContainerBox는 자체적으로 Wrap이라는 내부 요소를 렌더링할 뿐,

ContainerBox 자체는 사용자 인터페이스에서 직접 보이지 않는 추상화된 컴포넌트이다.

 

 

 

 

 

해결 방법

 

export const ContainerBox = ({ children, ...props }) => {
  return <Wrap {...props}>{children}</Wrap>;
};

 

공통 컴포넌트인 ContainerBox에서 Wrap 요소에 이벤트를 전달할 수 있도록 ...props를 전달하면 된다.

 

여기서 ...props는 상위 컴포넌트에서 전달된 모든 속성을 wrap에 전달한다.

 

 

 

 

문제 발생 원인

 

1. React 컴포넌트는 DOM 요소가 아니다

ContainerBox는 React 컴포넌트이지, DOM 요소가 아니다.

때문에 React의 이벤트는 DOM 요소에서만 작동하므로, 내부적으로 렌더링되는 Wrap에 이벤트를 전달해야한다.

 

2. props 전달 누락

ContainerBox에서 이벤트를 처리하려면, 내부의 DOM 요소인 Wrap에 이벤트가 전달될 수 있어야 한다.

때문에 {...props}를 적용 시킨다.