React 상태 관리 기초

import LikeButton from './LikeButton'; // 클라이언트 컴포넌트 임포트

export default function StateBasicPage() {
  console.log('StateBasicPage (Server Component) rendering...');
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '20px auto', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h1 style={{ textAlign: 'center', color: '#333' }}>React 상태 관리 기초</h1>
      <p style={{ textAlign: 'center', marginBottom: '30px', color: '#666' }}>
        아래 좋아요 버튼은 클라이언트 컴포넌트에서 상태를 관리합니다.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <LikeButton />
      </div>
    </div>
  );
}

"use client"; // 클라이언트 컴포넌트임을 명시

import React, { useState } from 'react';

export default function LikeButton() {
  // 좋아요 여부를 상태로 관리 (초기값: false)
  const [isLiked, setIsLiked] = useState(false);
  // 좋아요 개수를 상태로 관리 (초기값: 0)
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    // 이전 상태 값(prevIsLiked)을 사용하여 상태 업데이트
    setIsLiked(prevIsLiked => !prevIsLiked);
    // 좋아요 개수도 함께 업데이트
    setLikes(prevLikes => (isLiked ? prevLikes - 1 : prevLikes + 1));
  };

  return (
    <button
      onClick={handleClick}
      style={{
        padding: '12px 25px',
        fontSize: '1.2em',
        backgroundColor: isLiked ? '#ff4d4f' : '#f0f2f5',
        color: isLiked ? 'white' : '#595959',
        border: `2px solid ${isLiked ? '#ff4d4f' : '#d9d9d9'}`,
        borderRadius: '25px',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        gap: '10px',
        boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease',
      }}
    >
      ❤️
      <span>{likes} {isLiked ? '좋아요 취소' : '좋아요'}</span>
    </button>
  );
}

import UserProfile from './UserProfile'; // 클라이언트 컴포넌트 임포트

export default function StatePropsPage() {
  const initialUserName = "김넥스트"; // 서버 컴포넌트에서 정의한 초기값
  console.log('StatePropsPage (Server Component) rendering...');

  return (
    <div style={{ padding: '20px', maxWidth: '700px', margin: '20px auto', border: '1px solid #ddd', borderRadius: '8px' }}>
      <h1 style={{ textAlign: 'center', color: '#444' }}>`props`를 이용한 데이터 흐름</h1>
      <p style={{ textAlign: 'center', marginBottom: '30px', color: '#777' }}>
        부모 (서버)에서 전달된 사용자 이름을 자식 (클라이언트)에서 관리하고 수정합니다.
      </p>
      <UserProfile userName={initialUserName} /> {/* userName prop으로 전달 */}
    </div>
  );
}

"use client"; // 클라이언트 컴포넌트임을 명시

import React, { useState } from 'react';

interface UserProfileProps {
  userName: string; // 부모로부터 전달받을 prop의 타입 정의
}

export default function UserProfile({ userName }: UserProfileProps) {
  // prop으로 받은 userName을 초기값으로 사용하여 컴포넌트 내부 상태를 생성
  const [currentName, setCurrentName] = useState(userName);
  const [isEditing, setIsEditing] = useState(false);

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCurrentName(e.target.value);
  };

  const handleSave = () => {
    // 실제로는 여기서 API 호출 등으로 백엔드에 업데이트를 요청
    alert(`이름 저장: ${currentName}`);
    setIsEditing(false);
  };

  return (
    <div style={{ border: '2px dashed #6c757d', padding: '20px', borderRadius: '10px', backgroundColor: '#f8f9fa' }}>
      <h2 style={{ color: '#007bff' }}>사용자 프로필 (클라이언트 컴포넌트)</h2>
      {isEditing ? (
        <div>
          <label htmlFor="nameInput" style={{ display: 'block', marginBottom: '5px' }}>이름 편집:</label>
          <input
            id="nameInput"
            type="text"
            value={currentName}
            onChange={handleNameChange}
            style={{ width: 'calc(100% - 20px)', padding: '10px', marginBottom: '15px', borderRadius: '5px', border: '1px solid #ddd' }}
          />
          <button onClick={handleSave} style={{ padding: '10px 20px', marginRight: '10px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>저장</button>
          <button
            onClick={() => {
              setCurrentName(userName);
              setIsEditing(false);
            }}
            style={{
              padding: '10px 20px',
              backgroundColor: '#dc3545',
              color: 'white',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
          >
            취소
          </button>
        </div>
      ) : (
        <div>
          <p style={{ fontSize: '1.1em' }}>현재 이름: <strong style={{ color: '#343a40' }}>{currentName}</strong></p>
          <button onClick={() => setIsEditing(true)} style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>이름 수정</button>
        </div>
      )}
    </div>
  );
}