개발자(진) 옞

🍑 useEffectReact에서 부수 효과를 수행할 수 있게 해주는 Hook이다.렌더링 이후에 실행된다.useEffect(() => { // 부수 효과 로직}, [의존성]); 🍑 cleanup 함수useEffect 내부에서 return () => {} 형태로 작성하는 함수를 cleanup 함수라고 한다.타이머나 이벤트를 등록한 뒤 정리하지 않으면 메모리 누수나 중복 실행이 발생할 수 있기 때문에,보통 컴포넌트가 사라질 때나 effect가 다시 실행되기 전 정리 작업을 수행하기 위해 사용된다. 🍑 useEffect 실행 시점렌더링 (가상 DOM 계산)↓커밋 (DOM 업데이트 완료)↓useEffect 실행 💎즉, 화면이 실제로 브라우저에 렌더링 된 후에 실행된다. 🍑 cleanup 함수 실..

🍈 프롤로그 이번 주 블로그 주제로는 React로 모달을 구현할 때 알아두면 좋은 두 가지 개념,stopPropagation()과 createPortal에 대해 다뤄보려고 한다.모달을 구현하다 보면 내부를 클릭했는데 모달이 닫혀버린다든지,레이아웃이 깨진다든지 하는 상황을 한 번쯤 겪게 되는데,이 두 가지 개념을 제대로 이해하고 사용하면 이러한 문제들을 해결할 수 있다. 🍈 상황 우테코 레벨2 상품 목록 미션에서,장바구니에 담긴 상품 정보를 보여주는 모달을 구현했다. 닫기 버튼을 클릭해서 모달을 닫을 수는 있지만,UX를 고려해서 배경을 클릭했을 때도 모달이 닫히는 기능을 추가했다. 이후 리뷰어가 e.stopPropagation()을 사용하는 이유에 대해 질문해 주셨다.대충 어떤 역할을 하는지 짐작만 ..