📘 React Props와 State 완전 정복: 컴포넌트 데이터 흐름 가이드

// 자식 컴포넌트
const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>
}

// 부모 컴포넌트
const App = () => {
  return (
    <div>
      <Welcome name="Amy" />
      <Welcome name="Andy" />
      <Welcome name="Sapiens" />
    </div>
  )
}

// 방법 1: 파라미터에서 바로 구조분해
const Welcome = ({ name, age, city }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  )
}

// 방법 2: 함수 내부에서 구조분해
const Welcome = (props) => {
  const { name, age, city } = props
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  )
}

const Button = ({ label, color, size }) => {
  return (
    <button
      style={{
        backgroundColor: color,
        fontSize: size === 'large' ? '18px' : '14px',
        padding: '8px 16px',
      }}
    >
      {label}
    </button>
  )
}

// defaultProps 설정
Button.defaultProps = {
  label: '클릭',
  color: '#4CAF50',
  size: 'medium',
}

// 사용: label만 전달해도 나머지는 기본값으로
const App = () => {
  return (
    <div>
      <Button label="저장" color="#2196F3" />
      <Button label="삭제" color="#f44336" size="large" />
      <Button /> {/* 모든 기본값 사용 */}
    </div>
  )
}

// defaultProps 대신 기본값 파라미터 사용 (더 현대적인 방식)
const Button = ({ label = '클릭', color = '#4CAF50', size = 'medium' }) => {
  return (
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  )
}

npm install prop-types

import PropTypes from 'prop-types'

const UserCard = ({ name, age, isAdmin, hobbies, onClick }) => {
  return (
    <div className="user-card">
      <h2>{name} {isAdmin && '(관리자)'}</h2>
      <p>나이: {age}세</p>
      <ul>
        {hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      <button onClick={onClick}>프로필 보기</button>
    </div>
  )
}

// PropTypes 정의
UserCard.propTypes = {
  name: PropTypes.string.isRequired,        // 문자열, 필수
  age: PropTypes.number.isRequired,          // 숫자, 필수
  isAdmin: PropTypes.bool,                   // 불리언, 선택
  hobbies: PropTypes.arrayOf(PropTypes.string), // 문자열 배열
  onClick: PropTypes.func,                   // 함수
}

UserCard.defaultProps = {
  isAdmin: false,
  hobbies: [],
  onClick: () => {},
}

// children을 받는 컴포넌트 (래퍼 컴포넌트)
const Card = ({ title, children, className }) => {
  return (
    <div className={`card ${className}`}>
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}  {/* 여기에 자식 요소들이 렌더링됨 */}
      </div>
    </div>
  )
}

// 사용
const App = () => {
  return (
    <div>
      <Card title="사용자 정보" className="user-card">
        <p>이름: Amy</p>
        <p>이메일: amy@example.com</p>
        <button>수정</button>
      </Card>

      <Card title="공지사항">
        <ul>
          <li>시스템 점검 안내</li>
          <li>새 기능 업데이트</li>
        </ul>
      </Card>
    </div>
  )
}

const Input = ({ label, id, ...rest }) => {
  // label, id는 따로 사용하고, 나머지 속성들은 input 엘리먼트에 전달
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} {...rest} />
    </div>
  )
}

const App = () => {
  const inputProps = {
    type: 'email',
    placeholder: '이메일을 입력하세요',
    required: true,
    autoComplete: 'email',
  }

  return (
    <Input
      label="이메일"
      id="email"
      {...inputProps}  // 스프레드로 한꺼번에 전달
    />
  )
}

// Props Drilling 예시: theme을 계속 내려줘야 함
const App = () => {
  const theme = 'dark'
  return <Page theme={theme} />
}

const Page = ({ theme }) => {
  return <Sidebar theme={theme} />
}

const Sidebar = ({ theme }) => {
  return <Menu theme={theme} />
}

const Menu = ({ theme }) => {
  return <MenuItem theme={theme} />
}

const MenuItem = ({ theme }) => {
  // 드디어 실제로 theme을 사용하는 컴포넌트
  return (
    <li style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      메뉴 항목
    </li>
  )
}

import { useState } from 'react'

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

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

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

  const handleBadClick = () => {
    // 이렇게 하면 3이 아니라 1만 증가할 수 있다!
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    // 세 번 모두 같은 'count' 값을 참조하기 때문
  }

  const handleGoodClick = () => {
    // 함수형 업데이트를 사용하면 최신 state를 보장
    setCount(prev => prev + 1)
    setCount(prev => prev + 1)
    setCount(prev => prev + 1)
    // 이렇게 하면 정확히 3이 증가
  }

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleBadClick}>잘못된 방법 (+3 시도)</button>
      <button onClick={handleGoodClick}>올바른 방법 (+3)</button>
    </div>
  )
}

function UserForm() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [age, setAge] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    // API 호출...
    setIsSubmitting(false)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="이름" />
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="이메일" />
      <input value={age} onChange={(e) => setAge(e.target.value)} placeholder="나이" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '전송 중...' : '제출'}
      </button>
    </form>
  )
}

function UserForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: '',
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

  // 범용 핸들러: input name 속성을 이용
  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,      // 기존 데이터 복사 (불변성 유지!)
      [name]: value // 해당 필드만 업데이트
    }))
  }

  return (
    <form>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="이름" />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="이메일" />
      <input name="age" value={formData.age} onChange={handleChange} placeholder="나이" />
    </form>
  )
}

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React 공부하기', done: false },
    { id: 2, text: '운동하기', done: true },
  ])
  const [inputText, setInputText] = useState('')

  // 항목 추가
  const addTodo = () => {
    if (!inputText.trim()) return
    const newTodo = {
      id: Date.now(),
      text: inputText,
      done: false,
    }
    setTodos(prev => [...prev, newTodo])  // 새 배열 생성
    setInputText('')
  }

  // 완료 토글
  const toggleTodo = (id) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    )
  }

  // 항목 삭제
  const deleteTodo = (id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id))
  }

  return (
    <div>
      <div>
        <input
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="할 일 입력..."
        />
        <button onClick={addTodo}>추가</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>삭제</button>
          </li>
        ))}
      </ul>
      <p>총 {todos.length}개 / 완료 {todos.filter(t => t.done).length}개</p>
    </div>
  )
}

// 잘못된 예: 참조가 바뀌지 않아 React가 변경을 감지 못함
const [user, setUser] = useState({ name: 'Amy', age: 30 })

const badUpdate = () => {
  user.age = 31  // 직접 수정
  setUser(user)  // 같은 참조이므로 React가 변경을 감지 못함!
}

// 올바른 예: 새 객체를 생성하여 참조 변경
const goodUpdate = () => {
  setUser(prev => ({
    ...prev,  // 기존 객체의 속성을 복사
    age: 31   // 변경할 속성만 덮어씀
  }))
}

const [state, setState] = useState({
  user: {
    name: 'Amy',
    address: {
      city: '서울',
      district: '강남구',
    }
  }
})

// 중첩된 객체를 안전하게 업데이트
const updateCity = (newCity) => {
  setState(prev => ({
    ...prev,
    user: {
      ...prev.user,
      address: {
        ...prev.user.address,
        city: newCity,
      }
    }
  }))
}

npm install immer

import { useState } from 'react'
import { produce } from 'immer'

const [state, setState] = useState({
  user: {
    name: 'Amy',
    address: {
      city: '서울',
      district: '강남구',
    }
  },
  todos: [
    { id: 1, text: '공부', done: false }
  ]
})

// immer 사용: 직접 수정하는 것처럼 코드 작성
const updateCity = (newCity) => {
  setState(produce(draft => {
    draft.user.address.city = newCity  // 직접 수정처럼 보이지만 안전
  }))
}

const toggleTodo = (id) => {
  setState(produce(draft => {
    const todo = draft.todos.find(t => t.id === id)
    if (todo) todo.done = !todo.done  // 직접 수정
  }))
}

const Parent = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Amy')

  console.log('Parent 렌더링')

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>카운트 증가</button>
      <Child name={name} />  {/* count가 바뀌어도 Child는 리렌더링됨! */}
    </div>
  )
}

const Child = ({ name }) => {
  console.log('Child 렌더링')
  return <p>이름: {name}</p>
}

import { useState, memo } from 'react'

const Parent = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Amy')

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>카운트: {count}</button>
      <button onClick={() => setName('Andy')}>이름 변경</button>
      <MemoizedChild name={name} />
    </div>
  )
}

// React.memo로 감싸기
const MemoizedChild = memo(({ name }) => {
  console.log('Child 렌더링')
  return <p>이름: {name}</p>
})

// 또는 컴포넌트를 선언할 때 바로 감싸기
const Child = memo(({ name }) => {
  return <p>이름: {name}</p>
})

const MyComponent = memo(
  ({ data }) => {
    return <div>{data.value}</div>
  },
  (prevProps, nextProps) => {
    // true를 반환하면 리렌더링 안 함
    // false를 반환하면 리렌더링 함
    return prevProps.data.id === nextProps.data.id
  }
)

import { useState, memo, useCallback } from 'react'

// 할 일 항목 컴포넌트 - React.memo로 최적화
const TodoItem = memo(({ todo, onToggle, onDelete }) => {
  console.log(`TodoItem 렌더링: ${todo.id}`)
  return (
    <li
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        textDecoration: todo.done ? 'line-through' : 'none',
        color: todo.done ? '#aaa' : '#333',
        padding: '8px 0',
      }}
    >
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      <span style={{ flex: 1 }}>{todo.text}</span>
      <span style={{ fontSize: '12px', color: '#999' }}>
        {new Date(todo.createdAt).toLocaleDateString()}
      </span>
      <button
        onClick={() => onDelete(todo.id)}
        style={{ color: '#f44336', background: 'none', border: 'none', cursor: 'pointer' }}
      >
        삭제
      </button>
    </li>
  )
})

// 입력 컴포넌트
const TodoInput = memo(({ onAdd }) => {
  const [text, setText] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    if (!text.trim()) return
    onAdd(text.trim())
    setText('')
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="할 일을 입력하세요..."
        style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
      />
      <button
        type="submit"
        style={{ padding: '8px 16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
      >
        추가
      </button>
    </form>
  )
})

// 필터 컴포넌트
const TodoFilter = memo(({ filter, onChange }) => {
  return (
    <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
      {['all', 'active', 'done'].map(f => (
        <button
          key={f}
          onClick={() => onChange(f)}
          style={{
            padding: '4px 12px',
            backgroundColor: filter === f ? '#2196F3' : '#eee',
            color: filter === f ? 'white' : '#333',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          {f === 'all' ? '전체' : f === 'active' ? '진행 중' : '완료'}
        </button>
      ))}
    </div>
  )
})

// 메인 TodoList 컴포넌트
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React Props 공부하기', done: true, createdAt: Date.now() - 86400000 },
    { id: 2, text: 'React State 공부하기', done: true, createdAt: Date.now() - 43200000 },
    { id: 3, text: '불변성 개념 이해하기', done: false, createdAt: Date.now() },
  ])
  const [filter, setFilter] = useState('all')

  // useCallback으로 함수 메모이제이션 (TodoItem 재렌더링 방지)
  const handleAdd = useCallback((text) => {
    setTodos(prev => [
      ...prev,
      { id: Date.now(), text, done: false, createdAt: Date.now() }
    ])
  }, [])

  const handleToggle = useCallback((id) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    )
  }, [])

  const handleDelete = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id))
  }, [])

  // 필터링된 할 일 목록
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.done
    if (filter === 'done') return todo.done
    return true
  })

  const doneCount = todos.filter(t => t.done).length

  return (
    <div style={{ maxWidth: '500px', margin: '40px auto', fontFamily: 'sans-serif' }}>
      <h1>Todo List</h1>
      <p style={{ color: '#666' }}>
        {doneCount}/{todos.length} 완료
        {doneCount === todos.length && todos.length > 0 && ' 모두 완료!'}
      </p>

      <TodoInput onAdd={handleAdd} />
      <TodoFilter filter={filter} onChange={setFilter} />

      {filteredTodos.length === 0 ? (
        <p style={{ color: '#999', textAlign: 'center' }}>할 일이 없습니다.</p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {filteredTodos.map(todo => (
            <TodoItem
              key={todo.id}
              todo={todo}
              onToggle={handleToggle}
              onDelete={handleDelete}
            />
          ))}
        </ul>
      )}
    </div>
  )
}

export default TodoList

// 잘못된 코드
const [user, setUser] = useState({ name: 'Amy', age: 30 })

const birthday = () => {
  user.age++        // 직접 수정 - React가 감지하지 못함!
  setUser(user)     // 같은 참조라서 리렌더링 안 됨
}

// 올바른 코드
const birthday = () => {
  setUser(prev => ({ ...prev, age: prev.age + 1 }))
}

// 문제 상황
function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      // 여기서 count는 항상 0! (클로저가 초기값을 캡처)
      setCount(count + 1)
    }, 1000)
    return () => clearInterval(interval)
  }, [])  // 빈 의존성 배열

  return <p>{count}</p>
}

// 해결: 함수형 업데이트 사용
function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prev => prev + 1)  // 항상 최신 값을 기반으로
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return <p>{count}</p>
}

// 잘못된 코드 - 무한 렌더링 루프 발생!
function BadComponent() {
  const [count, setCount] = useState(0)
  setCount(count + 1)  // 렌더링 중에 State 변경!
  return <p>{count}</p>
}

// 올바른 코드 - useEffect로 사이드 이펙트 처리
function GoodComponent({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  // 렌더링 중에는 State 변경하지 않음
  return <p>{count}</p>
}

// 잘못된 코드 - key 없음
todos.map(todo => <TodoItem todo={todo} />)

// 잘못된 코드 - 인덱스를 key로 사용 (항목이 삭제/재정렬될 때 문제)
todos.map((todo, index) => <TodoItem key={index} todo={todo} />)

// 올바른 코드 - 고유한 id 사용
todos.map(todo => <TodoItem key={todo.id} todo={todo} />)