React useEffect의 오해: 초기화가 아닌 동기화 도구

// 예시: 인스턴스 생성, 전역 설정, Provider 준비
const instance = createI18nInstance();
const config = { locale: 'ko', namespaces: ['common'] };

// 예시: WebSocket 연결, 이벤트 리스너, 구독
useEffect(() => {
  const connection = chatRoom.connect(); // 연결
  return () => connection.disconnect();   // 정리
}, [chatRoom]); // chatRoom이 바뀌면 재연결

┌─────────────────────────────────────┐
│ 1. 렌더링 (함수 실행)                   │
│    - JSX 생성                        │
│    - useState, useRef 호출           │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│ 2. DOM 커밋                          │
│    - 브라우저 화면에 반영                │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│ 3. useEffect 실행 ⚠️                 │
│    - 렌더링 이후에 실행                 │
└─────────────────────────────────────┘

const TranslationProvider = ({ children, initialLocale }) => {
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
    initTranslations(instance, { locale: initialLocale });
    setIsReady(true); // ⚠️ 재렌더링 유발
  }, []);
 
  if (!isReady) return <Loading />; // 첫 렌더링: 로딩 화면
 
  return <I18nextProvider i18n={instance}>{children}</I18nextProvider>;
};

useEffect(() => {
  console.log('초기화');
}, []); // ⚠️ Strict Mode에서 2번 실행됨

첫 마운트 → Effect 실행 → Cleanup → 언마운트
→ 재마운트 → Effect 재실행

콘솔: "초기화"
콘솔: "초기화" (2번째)

const TranslationProvider = ({ children, initialLocale }) => {
  const isInitialized = useRef(false);
 
  //  렌더링 중에 실행 (useEffect 아님!)
  if (!isInitialized.current) {
    initTranslations(instance, {
      locale: initialLocale,
      namespaces: ['common'],
    });
    isInitialized.current = true;
  }
 
  return <I18nextProvider i18n={instance}>{children}</I18nextProvider>;
};

첫 마운트: 초기화 실행 → isInitialized = true
재마운트 (Strict Mode): 초기화 건너뜀 (useRef는 유지됨)

const MyProvider = ({ children, config }) => {
  //  함수 형태로 전달하면 첫 렌더링에서만 실행
  const [instance] = useState(() => createInstance(config));
 
  return <Context.Provider value={instance}>{children}</Context.Provider>;
};

const MyProvider = ({ children, config }) => {
  //  config가 바뀌면 인스턴스 재생성
  const instance = useMemo(
    () => createInstance(config),
    [config]
  );
 
  return <Context.Provider value={instance}>{children}</Context.Provider>;
};

const MyComponent = () => {
  const initialized = useRef(false);
 
  if (!initialized.current) {
    console.log('초기화:', new Date().toISOString());
    initialized.current = true;
  }
 
  return <div>컴포넌트</div>;
};

// ⚠️ 서버/클라이언트에서 다르게 동작할 수 있음
const MyProvider = ({ children }) => {
  const initialized = useRef(false);
 
  if (!initialized.current) {
    // 서버: 실행됨
    // 클라이언트 hydration: 다시 실행됨
    setupGlobalConfig();
    initialized.current = true;
  }
 
  return <Context.Provider value={data}>{children}</Context.Provider>;
};

const MyComponent = () => {
  const initialized = useRef(false); // DevTools에 표시 안 됨
  const [count, setCount] = useState(0); // DevTools에 표시됨
 
  // ...
};

//  Before: useEffect
const TranslationProvider = ({ children, initialLocale }) => {
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
    initTranslations(instance, { locale: initialLocale });
    setIsReady(true);
  }, []);
 
  if (!isReady) return <div>Loading...</div>;
  return <I18nextProvider i18n={instance}>{children}</I18nextProvider>;
};
 
//  After: useRef + if
const TranslationProvider = ({ children, initialLocale }) => {
  const isInitialized = useRef(false);
 
  if (!isInitialized.current) {
    initTranslations(instance, { locale: initialLocale });
    isInitialized.current = true;
  }
 
  return <I18nextProvider i18n={instance}>{children}</I18nextProvider>;
};

//  Before: useEffect (안티패턴!)
const PostList = ({ posts }) => {
  const [sortedPosts, setSortedPosts] = useState([]);
 
  useEffect(() => {
    const sorted = [...posts].sort((a, b) => b.date - a.date);
    setSortedPosts(sorted); // ⚠️ props 변경 시마다 재렌더링
  }, [posts]);
 
  return sortedPosts.map(post => <Post key={post.id} {...post} />);
};
 
//  After: useMemo
const PostList = ({ posts }) => {
  const sortedPosts = useMemo(
    () => [...posts].sort((a, b) => b.date - a.date), // 원본 보호
    [posts]
  );
 
  return sortedPosts.map(post => <Post key={post.id} {...post} />);
};

//  Before: useEffect
const App = () => {
  useEffect(() => {
    initAnalytics();
    configureErrorTracking();
  }, []); // Strict Mode에서 2번 실행됨
 
  return <Router>...</Router>;
};
 
//  After: useRef + if
const App = () => {
  const setupDone = useRef(false);
 
  if (!setupDone.current) {
    initAnalytics();
    configureErrorTracking();
    setupDone.current = true;
  }
 
  return <Router>...</Router>;
};

useEffect(() => {
  const ws = new WebSocket('ws://example.com');
  ws.onmessage = handleMessage;
  
  return () => ws.close(); // cleanup
}, []);

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

useEffect(() => {
  const subscription = store.subscribe(handleChange);
  
  return () => subscription.unsubscribe();
}, [store]);

useEffect(() => {
  document.title = `Messages (${count})`;
}, [count]);

const MyComponent = ({ config }) => {
  const initialized = useRef(false);
 
  if (!initialized.current) {
    //  useRef 수정 (React가 추적 안 함)
    initialized.current = true;
 
    //  지역 변수 생성
    const instance = createInstance(config);
 
    //  외부 객체 메서드 호출 (React 외부)
    instance.init();
  }
 
  return <div>...</div>;
};

const MyComponent = ({ config }) => {
  const [state, setState] = useState(0);
 
  //  렌더링 중 React state 변경 (무한 루프!)
  if (config.flag) {
    setState(1); // Error: Cannot update during render
  }
 
  //  렌더링 중 DOM 조작
  document.title = 'My App'; // 부작용!
 
  //  렌더링 중 전역 변수 수정
  window.globalCount++;
 
  return <div>...</div>;
};

// app/layout.tsx (Server Component)
import { createI18nInstance } from '@/lib/i18n';
 
//  모듈 레벨에서 초기화
const i18n = createI18nInstance({
  locale: 'ko',
  namespaces: ['common'],
});
 
export default function RootLayout({ children }) {
  // 서버에서 렌더링되므로 useEffect 사용 불가
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

// components/TranslationProvider.tsx
'use client';
 
import { useRef } from 'react';
import { I18nextProvider } from 'react-i18next';
import { initTranslations } from '@/lib/i18n';
 
export function TranslationProvider({ children, locale }) {
  const initialized = useRef(false);
 
  //  useRef 패턴 사용 가능
  if (!initialized.current) {
    initTranslations(locale);
    initialized.current = true;
  }
 
  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
}

const Provider = ({ children }) => {
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
    // 초기화 로직
    initData();
    setIsReady(true); // ⚠️ 재렌더링 유발
  }, []);
 
  if (!isReady) return <Loading />; // 첫 렌더링
 
  return <Context.Provider>{children}</Context.Provider>; // 재렌더링
};

1. 첫 렌더링
   └─ isReady === false → <Loading /> 반환
   └─ 자식 컴포넌트 렌더링 안 됨
 
2. DOM 커밋 → 화면에 로딩 표시
 
3. useEffect 실행 → setIsReady(true)
 
4. 재렌더링 ⚠️
   └─ isReady === true → <Provider> 반환
   └─ 모든 자식 컴포넌트 렌더링 시작
 
5. DOM 커밋 → 실제 콘텐츠 표시
 
총 렌더링: 2회

const Provider = ({ children }) => {
  const isInitialized = useRef(false);
 
  if (!isInitialized.current) {
    // 렌더링 중 초기화 (useEffect 아님!)
    initData();
    isInitialized.current = true;
  }
 
  return <Context.Provider>{children}</Context.Provider>;
};

1. 첫 렌더링
   └─ 조건문에서 초기화 실행
   └─ <Provider> 반환
   └─ 모든 자식 컴포넌트 렌더링
 
2. DOM 커밋 → 바로 실제 콘텐츠 표시
 
총 렌더링: 1회

// useEffect
useEffect(() => {
  console.log('초기화');
}, []);
// 출력: "초기화" "초기화" (2번)
 
// useRef + if
const initialized = useRef(false);
if (!initialized.current) {
  console.log('초기화');
  initialized.current = true;
}
// 출력: "초기화" (1번만)