TwentyTwentyOne

✅ React 컴포넌트 라이프사이클과 Hook에서의 대응 방식React는 UI를 구성하는 컴포넌트를 중심으로 동작하며, 이 컴포넌트들은 **특정 생애주기(lifecycle)**에 따라 실행됩니다.클래스 컴포넌트에서는 명확한 생애주기 메서드가 존재하지만, 함수형 컴포넌트에서는 Hook을 통해 같은 기능을 구현합니다.이번 글에서는 React 컴포넌트의 생애주기 흐름과, 각 생애주기에 대응되는 Hook 사용법을 실무 관점에서 정리해보겠습니다.📌 1. React의 기본 컴포넌트 라이프사이클클래스형 컴포넌트 기준으로 구분하면 다음과 같습니다:✅ 마운트(Mount) 단계컴포넌트가 화면에 처음 나타날 때주요 메서드: constructor, render, componentDidMount✅ 업데이트(Update) 단계..

✅ React Hook 사용법 정리: useEffect, useMemo, useCallback의 목적과 실무 활용법React 개발을 할 때 Hook은 거의 모든 컴포넌트의 뼈대를 이룹니다.특히 useEffect, useMemo, useCallback은 상태 변경과 성능 최적화에 있어 매우 중요한 역할을 합니다.이번 글에서는 이 세 가지 Hook의 차이점, 사용 목적, 그리고 실무에서 자주 접하는 사례까지 정리해 보겠습니다.📌 1. useEffect – 부수효과(Side Effect) 처리✅ 사용 목적렌더링 이후에 실행되는 작업 처리예: API 호출, 이벤트 리스너 등록, 타이머 설정 등✅ 기본 사용법useEffect(() => { console.log("컴포넌트가 마운트되었어요"); return (..