컴포넌트 라이프사이클 이해하기

import React, { useEffect } from 'react';

useEffect(() => {
  // 컴포넌트가 렌더링된 후에 실행될 코드 (부수 효과)

  return () => {
    // 컴포넌트가 언마운트되거나, 다음 이펙트가 실행되기 전에 실행될 '클린업(Clean-up)' 함수
    // 구독 해제, 타이머 제거 등 정리 작업
  };
}, [의존성 배열]); // (선택 사항) 의존성 배열: 이 배열의 값이 변경될 때만 이펙트가 다시 실행됩니다.

import React, { useState, useEffect } from 'react';

function MountedComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 이 코드는 컴포넌트가 처음 화면에 나타날 때 (마운트될 때) 한 번만 실행됩니다.
    console.log('MountedComponent가 마운트되었습니다!');

    // 페이지 제목 변경 (브라우저 탭 제목)
    document.title = 'React 앱 - 마운트됨';

    // (가상) API에서 데이터 가져오기 (마운트 시 초기 데이터 로드)
    const fetchData = async () => {
      console.log('데이터를 불러오는 중...');
      await new Promise(resolve => setTimeout(resolve, 2000)); // 2초 지연 시뮬레이션
      setData('성공적으로 로드된 데이터입니다!');
      console.log('데이터 로드 완료!');
    };

    fetchData();

    // (선택적) 클린업 함수: 컴포넌트가 언마운트될 때 실행됩니다.
    return () => {
      console.log('MountedComponent가 언마운트될 예정입니다.');
      document.title = 'React 앱'; // 제목을 원래대로 복원
    };
  }, []); // (1) 빈 의존성 배열: 마운트 시 한 번만 실행

  return (
    <div style={{ border: '1px solid #ff7f50', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>마운트 시 동작하는 컴포넌트</h2>
      <p>{data ? data : '데이터 로드 중...'}</p>
    </div>
  );
}

export default MountedComponent;

import React, { useState, useEffect } from 'react';

function CounterWithEffect() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  // (1) count state가 변경될 때마다 이펙트 실행
  useEffect(() => {
    console.log(`카운트가 ${count}로 변경되었습니다.`);
    setMessage(`현재 카운트 값은 ${count} 입니다.`);

    // (선택적) 클린업: 이전 메시지 초기화
    return () => {
      console.log('이전 카운트 이펙트 정리');
      // setMessage(''); // 필요하다면 메시지 초기화 로직
    };
  }, [count]); // (2) 의존성 배열에 count 추가

  return (
    <div style={{ border: '1px solid #4CAF50', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>카운터 (useEffect 활용)</h2>
      <p>{message}</p>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        증가
      </button>
      <button onClick={() => setCount(0)} style={{ marginLeft: '10px' }}>
        초기화
      </button>
    </div>
  );
}

export default CounterWithEffect;

import React, { useState, useEffect } from 'react';

function AlwaysRunEffect() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    // 이 코드는 컴포넌트가 렌더링(리렌더링)될 때마다 실행됩니다.
    // 무한 루프에 빠지지 않도록 주의해야 합니다. (state 업데이트를 여기서 직접하면 안 됨)
    console.log('컴포넌트가 렌더링될 때마다 실행!', value);
  }); // (1) 의존성 배열 생략

  return (
    <div style={{ border: '1px solid #8e44ad', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>항상 실행되는 useEffect</h2>
      <p>값: {value}</p>
      <button onClick={() => setValue(value + 1)}>값 증가</button>
    </div>
  );
}

export default AlwaysRunEffect;

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    console.log('타이머 시작');
    // 1초마다 seconds state를 증가시키는 타이머 설정
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // (1) 클린업 함수 반환: 컴포넌트가 언마운트되거나 이펙트 재실행 전에 타이머 해제
    return () => {
      console.log('타이머 클린업');
      clearInterval(interval); // (2) 타이머 해제
    };
  }, []); // 빈 의존성 배열: 컴포넌트 마운트 시 한 번만 타이머 설정

  return (
    <div style={{ border: '1px solid #17a2b8', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>타이머 컴포넌트</h2>
      <p>현재 시간: {seconds}초</p>
      <p>이 컴포넌트가 화면에서 사라지면 타이머도 멈춥니다.</p>
    </div>
  );
}

export default TimerComponent;

import React, { useState } from 'react';
import './App.css';
import MountedComponent from './components/MountedComponent';
import CounterWithEffect from './components/CounterWithEffect';
import AlwaysRunEffect from './components/AlwaysRunEffect';
import TimerComponent from './components/TimerComponent'; // 추가

function App() {
  const [showMounted, setShowMounted] = useState(true);
  const [showTimer, setShowTimer] = useState(true); // TimerComponent 제어용

  return (
    <div className="App">
      <h1>React 컴포넌트 라이프사이클과 useEffect</h1>

      <button onClick={() => setShowMounted(!showMounted)} style={{ margin: '10px', padding: '10px 20px' }}>
        MountedComponent {showMounted ? '숨기기' : '보이기'}
      </button>
      {showMounted && <MountedComponent />} {/* 조건부 렌더링 */}

      <hr />

      <CounterWithEffect />

      <hr />

      <AlwaysRunEffect />

      <hr />

      <button onClick={() => setShowTimer(!showTimer)} style={{ margin: '10px', padding: '10px 20px' }}>
        TimerComponent {showTimer ? '숨기기' : '보이기'}
      </button>
      {showTimer && <TimerComponent />} {/* 조건부 렌더링 */}
    </div>
  );
}

export default App;