부모 opacity가 자식 컴포넌트에 적용 안되려면?

1. 용도: modal에서 부모의 backdrop
2. 주의: 부모에서 적용하려는 opacity가 배경인 경우만 가능
3. 사용법 in CSS
   • opacity: X
   • rgba: 0

부모에서 css 예시

/* 이렇게 말고 */
background-color:black;
opacity: 0.7;

/* 이렇게! */
background-color: rgba(0, 0, 0, 0.7);

부모 이벤트가 자식에 전파되지 않도록 하려면?

1. 용도: modal에서 부모의 backdrop을 클릭했을 때만 이벤트 발생하도록(onClick)
2. 사용법 in React: event.stopPropagation()

부모에서 React 예시

<StyledBackDrop
	onMouseEnter={onMouseEnter}
    	onMouseLeave={onMouseLeave}
    	onClick={onMouseLeave}
>
	<Card onClick={(event) => event.stopPropagation()} radius={12}>
    	{/* 자식까지 onClick 전파 안되게 */}
        {children}
    </Card>
</StyledBackDrop>