개발자(진) 옞

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

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

우테코 레벨 2 페이먼츠 2단계 미션 중 다음과 같은 기능 요구사항이 있었다.입력 필드는 사용자의 입력이 완료되면 다음 필드로 자동으로 이동한다. 먼저 페이먼츠 미션의 기능을 간단하게 소개하자면,사용자에게 카드 정보를 입력받아 카드를 등록(여기서 등록이란, 모든 폼 정보가 유효한지 확인하고, 확인 버튼 클릭 시 카드 등록 완료 페이지로 넘어가는 행위를 말한다.)하는 서비스이다. 궁금하다면 요기서 사용해볼 수 있다! 위의 요구사항을 다른 말로 동적 입력 UI 구현이라고도 할 수 있다.페이먼츠 미션에서 동적 입력 UI를 구현하기 위해 신경 쓸 부분에는 크게 두 가지가 있었다. 1. 같은 input 내에서의 자동 포커스ex) 카드 번호 (카드 번호의 총 input은 4개이며, 올바른 값이 입력되면 다음 inp..