diff --git a/src/App.jsx b/src/App.jsx index 8e619ec..691fd0f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,7 @@ import Button from "./components/Button"; import Counter from "./components/Counter"; import Input from "./components/Input"; import Wrapper from "./components/Wrapper"; - +// 버그 5개 function App() { return ( diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 9fa8039..70c4520 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,7 +1,12 @@ import { StyledButton } from "./styles"; function Button() { - return 제출; + function handleButton(e){ + e.stopPropagation(); + alert("제출 버튼 클릭"); + } + + return 제출; } export default Button; diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx index 31ec31c..d657843 100644 --- a/src/components/Counter.jsx +++ b/src/components/Counter.jsx @@ -3,19 +3,27 @@ import { StyledButton, CounterWrapper, ButtonWrapper } from "./styles"; function Counter() { const [isSent, setIsSent] = useState(false); + const [count, setCount] = useState(0); if (isSent) { return
전송되었습니다.
; } else { - const [count, setCount] = useState(0); return ( {count} - setCount(count + 1)}> + { + e.stopPropagation(); + e.preventDefault(); + setCount(count + 1); + }}> 더하기 - setIsSent(true)}>Send + { + e.stopPropagation(); + e.preventDefault(); + setIsSent(true); + }}>Send ); diff --git a/src/components/Input.jsx b/src/components/Input.jsx index efe3c47..0d5fffd 100644 --- a/src/components/Input.jsx +++ b/src/components/Input.jsx @@ -1,10 +1,10 @@ import { StyledInput } from "./styles"; - +// 전파 방지 function Input() { return ( <>

입력

- + {e.stopPropagation();}}/> ); } diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx index bda9444..359deb8 100644 --- a/src/components/Wrapper.jsx +++ b/src/components/Wrapper.jsx @@ -3,8 +3,9 @@ function Wrapper({ children }) { const clickFunc = () => { alert("배경 클릭"); }; + return ( - +

배경을 클릭할 수 있어요

{children}