개발자(진) 옞

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

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