dev-hpk 님의 블로그

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다. 목차 1. 리액트의 라이프사이클 단계 2. 함수형 컴포넌트와 useEffect 3. useEffect 사용 시 주의할 점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 리액트의 라이프사이클 단계위 사진은 Class 방식의 라이프 사이클입니다.함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.1. 마운트 (Mount)정의: 컴포넌트가 생성되고 DOM에 추가되는 단계주요 메서드: componentDidMount (클래스 컴포넌트 기준)..

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다.🌈 개선 사항 : select 메뉴 버튼이나 옵션 바깥 부분을 클릭했을 때 select 메뉴가 닫히면 좋을 것 같다.멘토님께 피드백을 받고 구글, 네이버 같은 사이트들을 확인해 봤는데 모두 select 메뉴 바깥 부분을 클릭하면 닫히도록 동작하네요👀💡 수정 코드 및 결과/* import, type 등 생략... */function Dropdown({ children, menus, onMenuClick,}: PropsWithChildren) { const { isOpen, toggleDropdown, closeDropdown } = useDropdown(); const ref = useRef(); const hand..