useEffect4 왜 useState를 조건문 안에서 사용하면 안 되나요? 1. 핵심 결론React는 Hook을 관리할 때 이름(변수명)이 아니라 **"호출된 순서(Order)"**에 의존하기 때문입니다. 중간에 조건문에 의해 Hook 하나가 건너뛰어지면, 그 뒤에 있는 모든 Hook들의 순서가 한 칸씩 밀리면서 엉뚱한 상태값(State)을 참조하는 대참사가 벌어집니다.2. React 내부 동작 원리 (Linked List)React 엔진(Fiber) 내부는 각 컴포넌트의 Hook들을 연결 리스트(Linked List) 형태로 관리합니다.React의 시선: "첫 번째 Hook은 name, 두 번째는 age"라고 기억하지 않습니다.실제 저장 방식: "Index 0번엔 '철수', Index 1번엔 '30'이 들어있다"라고 순서대로만 기억합니다. 네, 블로그 작성용 메모 형식으로 R.. 2026. 1. 16. useEffect를 이용하여 로딩 상태 관리하는 방법과 Suspense를 활용하는 방법에 대한 차이점 핵심 요약구분useEffect 기반 로딩 처리Suspense 기반 로딩 처리동작 방식컴포넌트 렌더 후 데이터 fetch → 상태 업데이트렌더링 중 데이터가 필요하면 “Promise”가 던져질 때 자동으로 fallback 표시로딩 표시 시점렌더 이후 (UI가 잠깐 깜빡일 수 있음)렌더 중 (UI 끊김 없이 부드럽게)코드양많음 (로딩 state, 에러 state 관리)적음 (Suspense boundary만 작성)중첩 로딩직접 로직 작성해야함Suspense boundary 단위로 자동 처리서버 컴포넌트사용 불가Suspense는 SSR에서 완전 지원UX깜빡임, 느린 화면 전환 가능부드러운 전환, 자연스러운 스트리밍에러 처리try/catch + 상태 관리ErrorBoundary로 구조적으로 해결사용 목적기존 C.. 2025. 11. 19. useEffect가 호출되는 시점 useEffect는 **React 함수형 컴포넌트에서 부수 효과(side effect)**를 수행하기 위한 훅입니다.예를 들어, 데이터 요청, DOM 조작, 이벤트 등록/해제 등의 작업을 할 때 사용합니다.이 훅이 **언제 호출되는지(즉, 실행 시점)**은 의존성 배열([])에 따라 달라집니다. - 기본 개념useEffect의 기본 형태는 다음과 같습니다:useEffect(() => { // 실행할 코드 (effect) return () => { // 정리(clean-up) 함수 (optional) };}, [deps]); 여기서 deps는 **의존성 배열(dependency array)**로,이 배열의 값이 변경될 때마다 effect가 다시 실행됩니다. - 호출 시점 정리의존성 배열호출 시점.. 2025. 11. 7. 이전 1 2 다음