React 프로젝트에서 Container 컴포넌트에 Link 태그를 사용해 상세 페이지로 이동하도록 구현했습니다.
또한, Container 내부에는 좋아요(Like) 버튼이 있으며, 사용자가 좋아요를 누르면 API 요청을 통해 상태가 변경됩니다.
그러나 예상과 다르게 좋아요 버튼을 클릭하면 상세 페이지로 이동하면서 좋아요 기능이 정상적으로 동작하지 않는 문제가 발생했습니다.
오류 해결 하기
이벤트 버블링과 이벤트 캡쳐링
이벤트 버블링
이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 상위 요소들로 전달되어 가는 현상을 말합니다.
-
이벤트가 발생한 가장 하위의 요소에서 시작하여 DOM 트리를 따라 상위 요소로 전파됩니다.
-
예를 들어 버튼 클릭 시 버튼 -> body -> html -> document 순으로 이벤트가 전파됩니다.
-
대부분의 이벤트는 기본적으로 버블링됩니다.
이벤트 캡처링
이벤트 캡처링은 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식입니다.
- 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전달됩니다
- 예를 들어, 버튼 클릭 시 document->html-> body->div->버튼 순으로 이벤트가 전파됩니다.
- 캡처링은
addEventListener()메서드의 세 번째 인자로 true를 전달하여 활성화할 수 있습니다.
이벤트 전파 제어
event.stopPropation()메서드를 사용하여 이벤트의 전파를 중단할 수 있습니다.- 이는 버를링이나 캡처링 과정에서 상위 요소로의 이벤트 전파를 막습니다.
e.preventDefault() 과 e.stopPropagation()
저의 경우에는 단순히 2개를 넣는다고 해결 된것이 아니라 onClick에서 사용되는 화살표 함수였을때와 일반 함수였을 때 다르게 동작하는 것을 알게 되었습니다.
화살표 함수와 일반 함수의 특징과 차이점
import { useEffect } from 'react'
function Test() {
const arrowFunction = () => {
console.log('Arrow function called')
}
function functionClick() {
console.log('function')
}
useEffect(() => {
console.log('Arrow function reference changed:', arrowFunction)
}, [arrowFunction])
useEffect(() => {
console.log('Arrow function reference changed:', functionClick)
}, [functionClick])
return (
<>
<button onClick={arrowFunction}>Click me</button>
<button onClick={functionClick}>Click me1</button>
</>
)
}
export default Test
화살표 함수와 일반 함수의 차이를 쉽게 알아보기 위해 간단하게 테스트 코드를 작성하여 확인해보았습니다.
코드로 에러 해결 확인하기
const handleUpdateLike = (id: string, e: React.MouseEvent<SVGAElement>) => {
e.preventDefault()
e.stopPropagation()
// 좋아요 기능 api 호출
}
return (
<>
{is_public && (
<>
<S.CardContainer
id={id}
to={`/view/${id}`}>
<S.ContentWrapper>
<S.TextWrapper>
<FeedFooter
likes={likes}
comments={comments}
date={dateKoreanFormat(date)}
onClick={handleOptionsPopup}
onLikeClick={e => handleUpdateLike(id, e)}
likesState={likesState}
/>
</S.TextWrapper>
</S.ContentWrapper>
</S.CardContainer>
</>
)}
</>
)
}
export const FeedFooter = ({
likes,
comments,
date,
onClick,
onLikeClick,
likesState
}: {
likes: number
comments: number
date: string
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
onLikeClick: (e: React.MouseEvent<SVGAElement>) => void
likesState: boolean
}) => (
<>
<S.Footer>
<S.Stat>
<S.Icon>
<HeartIcon
onClick={() => onLikeClick()}
liked={likesState}
/>
</S.Footer>
</>
)
const HeartIcon = styled(FaHeart)<HeartIconProps>`
color: ${({ liked }) => (liked ? 'red' : 'gray')};
cursor: pointer;
&:hover {
color: ${({ liked }) => (liked ? 'darkred' : 'darkgray')};
}
`
하지만 위 코드에서 onClick 함수에 ()=>onLikeClick()으로 함수를 사용했을 때는 Link 의도 한대로 동작하지 않았고, onLikeClick을 사용했을때는 의도한대로 Link 태그가 작동하지 않았으며,()=>onLikeclick()에서 event를 전달해주지 않아 Link 태그가 의도한대로 작동하지 않은 것을 알게 되었습니다.
후기
화살표 함수와 일반 함수의 차이점을 다양한 경우의 수를 테스트하며 확인하려 하였지만, 결국 다른 이유로 인해 발생한 에러임을 알게 되었습니다. 하지만 그 과정에서 두 함수의 차이를 명확히 이해할 수 있었습니다. 또한, 기본적으로 알고 있던 이벤트 버블링을 실제로 경험하며, 어떤 상황에서 발생하는지 그리고 어떻게 해결해야 하는지를 배울 수 있어 유익한 시간이었습니다.
