프론트엔드 스터디 11주차: React 기초 2 — useEffect, 이벤트 처리, 폼

import { useState, useEffect } from "react";

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

  useEffect(() => {
    // 이 함수는 렌더링 이후에 실행됨
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .  data

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

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

// 패턴 3. 배열 없음 — 매 렌더링마다 실행 (거의 안 씀)
useEffect(() => {
  console.log("렌더링할 때마다 — 주의: 성능 문제 가능");

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

  // 클린업(cleanup) — 컴포넌트가 사라지거나 의존성이 바뀔 때 실행
  return () => {
    clearInterval(timer);
  };
}, []);

// ❌ 잘못된 방법 — useEffect 콜백을 async로 만듦
useEffect(async () => {
  const data = await fetch("/api/data");
  // React가 반환된 Promise를 클린업 함수로 인식하려고 시도
}, []);

// ✅ 올바른 방법 — 내부에 async 함수를 정의하고 호출
useEffect(() => {
  async function fetchData() {
    try {
      const res = await fetch("/api/data");
      const data = await res.json();
      setDatadata

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function loadPosts() {
      try {
        const res = await fetch("/api/posts");
         res   

function ButtonDemo() {
  // 이벤트 핸들러 함수 정의
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }

  return (
    <div>
      {/* ✅ 함수 참조 전달 — 클릭할 때 실행 */}
      <button onClick={handleClick}>클릭</button>

      {/* ✅ 인라인 화살표 함수 — 인자가 필요할 때 */}
      <button onClick  

function InputDemo() {
  function handleChange(e) {
    // e.target — 이벤트가 발생한 DOM 요소
    console.log(e.target.value); // 입력된 텍스트
    console.log(e.target.name); // input의 name 속성
  }

  function handleSubmit(e) {
    // 폼 제출 시 페이지 새로고침 방지
    e.preventDefault();
    console.log("폼 제출됨");
  

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      {/* value로 표시할 값 지정, onChange로 변경 감지 */}
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름을 입력하세요

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  function handleSubmit(e) {
    e.preventDefault(); // 페이지 새로고침 방지

    // 간단한 유효성 검사
    if (!email.includes("@")) {

function SignupForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  // name 속성을 기준으로 해당 필드만 업데이트
  function handleChange(e) {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }

import { useState, useEffect } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]); // 할 일 목록 (배열 state)
  const [input, setInput] = useState(""); // 입력 필드 (문자열 state)

  // 마운트 시 localStorage에서 데이터 불러오기 (useEffect)
  useEffect(() => {
    const saved = localStorage.getItem("todos");
    if (saved) {
      saved