프론트엔드 스터디 대면 12주차: React 심화 — useState와 useEffect

import { useState } from "react";

function Counter() {
  // [현재 값, 값을 바꾸는 함수]
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

// ❌ 잘못된 방법 — React가 변경을 감지하지 못함
count++;
count = count + 1;

// ✅ 올바른 방법 — setState로만 변경
setCount(count + 1);

// ❌ 클로저 함정 — 오래된 count를 참조할 수 있음
setCount(count + 1);

// ✅ 함수형 업데이트 — 항상 최신 상태를 받음
setCount((prev) => prev + 1);

const [user, setUser] = useState({ name: "철수", age: 25 });

// ❌ 직접 수정 — 안 됨
user.age = 26;

// ✅ 스프레드로 새 객체 생성
setUser((prev) => ({ ...prev, age: prev.age + 1 }));
// { name: '철수', age: 26 }

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 렌더링 이후에 실행
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]); // ← 의존성 배열: userId가 바뀔 때마다 재실행

  return <div>{user?.name}</div>;
}

// 1. 빈 배열 [] — 마운트 시 한 번만 실행
useEffect(() => {
  console.log("컴포넌트가 처음 나타났을 때 한 번만");
}, []);

// 2. 값이 있는 배열 [dep] — dep이 바뀔 때마다 실행
useEffect(() => {
  console.log("userId가 바뀔 때마다");
}, [userId]);

// 3. 배열 없음 — 매 렌더링마다 실행 (거의 안 씀)
useEffect(() => {
  console.log("렌더링할 때마다");
});

// useEffect 안에서 async 직접 사용 불가
// ❌ 잘못된 방법
useEffect(async () => {
  const data = await fetch("/api/data");
});

// ✅ 올바른 방법 — 내부에 async 함수 정의 후 호출
useEffect(() => {
  async function loadData() {
    try {
      const res = await fetch("/api/data");
      const data = await res.json();
      setData(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  loadData();
}, []);

useEffect(() => {
  const timer = setInterval(() => {
    setCount((prev) => prev + 1);
  }, 1000);

  // 클린업 함수 — 컴포넌트가 사라지거나 의존성이 바뀌기 전에 실행
  return () => clearInterval(timer);
}, []);

// ❌ 버그 — count를 사용하지만 의존성에 없음
useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // 항상 초기값(0)을 출력
  }, 1000);
  return () => clearInterval(timer);
}, []); // count를 빠뜨림

// ✅ 해결 — 함수형 업데이트로 의존성 회피
useEffect(() => {
  const timer = setInterval(() => {
    setCount((prev) => prev + 1); // 함수형 업데이트로 count 의존성 제거
  }, 1000);
  return () => clearInterval(timer);
}, []);

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = count === 0 ? "내 앱" : `내 앱 (${count})`;
  }, [count]);

  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>클릭</button>
    </div>
  );
}

function ContactForm() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("올바른 이메일을 입력하세요");
      return;
    }
    setError("");
    console.log({ email, message });
    setEmail("");
    setMessage("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="이메일"
      />
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="메시지"
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">보내기</button>
    </form>
  );
}

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

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <p>경과 시간: {seconds}초</p>;
}