B-2: 상태와 이벤트 — useState

// 지난 시간에 만든 PostCard 에서 좋아요와 관련된 부분만 뽑아 보면
export function PostCard({ liked, likeCount }: PostCardProps) {
  return (
    <article className="post-card">
      <p className="post-likes">좋아요 {likeCount}개</p>
    </article>
  );
}

// 지난 과목에서 좋아요를 처리하던 방식
likeButton.addEventListener('click', () => {
  post.liked = !post.liked;
  post.likeCount += post.liked ? 1 : -1;

  likeCountEl.textContent = `좋아요 ${post.likeCount}개`;
  likeButton.classList.toggle('liked', post.liked);
});

 오늘의 여정

 Step 1~2   버튼에 이벤트 붙이기 · useState 로 화면이 기억하기
    │
 Step 3~4   조건부 렌더링 · 배열을 화면으로 (map 과 key)
    │
 Step 5~6   상태 끌어올리기 · 바꾸지 말고 새로 만들기
    │
 Step 7     입력창의 값도 상태다 (onChange)
    ▼
 좋아요가 눌리고 댓글이 달리는 인스타 피드로 마무리

// apps/web-spa/src/components/ClickCounter.tsx

export function ClickCounter() {
  // 상태를 배우기 전 단계 — 일반 변수로 세어 본다
  let clickCount = 0;

  function handleClick() {
    clickCount += 1;
    console.log('지금 clickCount 는', clickCount);
  }

  return (
    <button className="like-button" onClick={handleClick}>
      눌린 횟수: {clickCount}
    </button>
  );
}

const button = document.querySelector('.like-button');
button.addEventListener('click', handleClick);

onClick={handleClick}     // 함수 자체를 넘긴다
onClick={handleClick()}   // 함수를 지금 불러서 그 결과를 넘긴다

error TS2322: Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.

 순수 JS                        React

 값을 바꾼다                     값을 바꾼다
    +                              ↓
 화면도 직접 고친다               React 가 컴포넌트를 다시 부른다
                                   ↓
                                새로 그려진 화면으로 바뀐다

 React 에게는 "값이 바뀌었다" 는 신호가 필요하다

error  Cannot modify local variables after render completes

This argument is a function which may reassign or mutate `clickCount` after
render, which can cause inconsistent behavior on subsequent renders.
Consider using state instead.

// apps/web-spa/src/components/LikeButton.tsx
import { useState } from 'react';

interface LikeButtonProps {
  initialLikeCount: number;
}

export function LikeButton({ initialLikeCount }: LikeButtonProps) {
  const [likeCount, setLikeCount] = useState(initialLikeCount);

  function handleClick() {
    setLikeCount(likeCount + 1);
  }

  return (
    <button className="like-button" onClick={handleClick}>
      좋아요 {likeCount}개
    </button>
  );
}

const [likeCount, setLikeCount] = useState(initialLikeCount);

 클릭
   ↓
 setLikeCount(1241)
   ↓
 React 가 이 컴포넌트의 값을 1241 로 기억한다
   ↓
 LikeButton() 을 다시 부른다
   ↓
 이번엔 useState 가 1241 을 돌려준다
   ↓
 "좋아요 1241개" 가 그려진다

error TS2588: Cannot assign to 'likeCount' because it is a constant.

error  React Hook "useState" is called conditionally. React Hooks must be
       called in the exact same order in every component render

error  React Hook "useState" is called in function "makeLikeState" that is
       neither a React function component nor a custom React Hook function.
       React component names must start with an uppercase letter. React Hook
       names must start with the word "use"

// apps/web-spa/src/components/LikeButton.tsx
import { useState } from 'react';

interface LikeButtonProps {
  initialLiked: boolean;
  initialLikeCount: number;
}

export function LikeButton({ initialLiked, initialLikeCount }: LikeButtonProps) {
  const [liked, setLiked] = useState(initialLiked);
  const [likeCount, setLikeCount] = useState(initialLikeCount);

  function handleClick() {
    setLiked(!liked);
    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
  }

  return (
    <div className="like-area">
      <button
        className={liked ? 'like-button liked' : 'like-button'}
        onClick={handleClick}
      >
        {liked ? '♥ 좋아요 취소' : '♡ 좋아요'}
      </button>
      {likeCount > 0 && <p className="post-likes">좋아요 {likeCount}개</p>}
    </div>
  );
}

{liked ? '♥ 좋아요 취소' : '♡ 좋아요'}

className={liked ? 'like-button liked' : 'like-button'}

{likeCount > 0 && <p className="post-likes">좋아요 {likeCount}개</p>}

{likeCount && <p>좋아요 {likeCount}개</p>}

function handleClick() {
  setLiked(!liked);
  setLikeCount(liked ? likeCount - 1 : likeCount + 1);
}

// apps/web-spa/src/components/PostCard.tsx
import { LikeButton } from './LikeButton';

export function PostCard({
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
}: PostCardProps) {
  return (
    <article className="post-card">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <img className="post-image" src={imageUrl} alt={`${username} 의 게시물`} />
      <LikeButton initialLiked={liked} initialLikeCount={likeCount} />
      <p className="post-content">
        <strong>{username}</strong> {content}
      </p>
      <p className="post-comments">댓글 {commentCount}개 모두 보기</p>
    </article>
  );
}

<PostCard {...firstPost} />
<PostCard {...secondPost} />

// apps/web-spa/src/components/Feed.tsx
import { feedPosts } from '../data/feed';
import { PostCard } from './PostCard';

export function Feed() {
  return (
    <>
      {feedPosts.map((post) => (
        <PostCard key={post.id} {...post} />
      ))}
    </>
  );
}

Each child in a list should have a unique "key" prop.
See https://react.dev/link/warning-keys for more information.

 key 가 순서 번호일 때            key 가 게시물 id 일 때

 0: jaehoon                      1: jaehoon
 1: minji                        2: minji
      │ jaehoon 을 지우면              │ jaehoon 을 지우면
      ▼                                ▼
 0: minji                        2: minji

 "0번 항목의 내용이 바뀌었네"      "1번 항목이 사라졌네. 2번은 그대로네"
 → 0번 자리를 재활용한다          → minji 를 건드리지 않는다

// apps/web-spa/src/components/KeyDemo.tsx
import { useState } from 'react';
import { feedPosts } from '../data/feed';

// 줄마다 자기 좋아요 상태를 들고 있다
function DemoRow({ username }: { username: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <li className="key-demo-row">
      <strong>{username}</strong>
      <button
        className={liked ? 'like-button liked' : 'like-button'}
        onClick={() => setLiked(!liked)}
      >
        {liked ? '♥' : '♡'}
      </button>
    </li>
  );
}

// key 를 순서 번호로 준 목록
export function IndexKeyList() {
  const [posts, setPosts] = useState(feedPosts);

  return (
    <section className="key-demo">
      <h3>key = 순서 번호</h3>
      <ul className="key-demo-list">
        {posts.map((post, index) => (
          <DemoRow key={index} username={post.username} />
        ))}
      </ul>
      <button className="hide-button" onClick={() => setPosts(posts.slice(1))}>
        맨 위 게시물 숨기기
      </button>
    </section>
  );
}

// key 를 게시물 id 로 준 목록 — 위와 딱 한 줄 다르다
{posts.map((post) => (
  <DemoRow key={post.id} username={post.username} />
))}

 지금

 App          아무것도 모른다
   │
 Feed
   │
 PostCard
   │
 LikeButton   liked 를 혼자 들고 있다   ← 값이 여기 갇혀 있다

// apps/web-spa/src/components/LikeButton.tsx

interface LikeButtonProps {
  liked: boolean;
  likeCount: number;
  onToggle: () => void;
}

export function LikeButton({ liked, likeCount, onToggle }: LikeButtonProps) {
  return (
    <div className="like-area">
      <button
        className={liked ? 'like-button liked' : 'like-button'}
        onClick={onToggle}
      >
        {liked ? '♥ 좋아요 취소' : '♡ 좋아요'}
      </button>
      {likeCount > 0 && <p className="post-likes">좋아요 {likeCount}개</p>}
    </div>
  );
}

// apps/web-spa/src/components/PostCard.tsx
import type { PostCardProps } from '../types/derived';

interface PostCardViewProps extends PostCardProps {
  onToggleLike: (id: number) => void;
}

export function PostCard({
  id,
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
  onToggleLike,
}: PostCardViewProps) {
  return (
    <article className="post-card">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <img className="post-image" src={imageUrl} alt={`${username} 의 게시물`} />
      <LikeButton
        liked={liked}
        likeCount={likeCount}
        onToggle={() => onToggleLike(id)}
      />
      <p className="post-content">
        <strong>{username}</strong> {content}
      </p>
      <p className="post-comments">댓글 {commentCount}개 모두 보기</p>
    </article>
  );
}

// apps/web-spa/src/components/Feed.tsx
import type { Post } from '../types/instagram';

interface FeedProps {
  posts: Post[];
  onToggleLike: (id: number) => void;
}

export function Feed({ posts, onToggleLike }: FeedProps) {
  return (
    <>
      {posts.map((post) => (
        <PostCard key={post.id} {...post} onToggleLike={onToggleLike} />
      ))}
    </>
  );
}

// apps/web-spa/src/App.tsx
import { useState } from 'react';
import { Feed } from './components/Feed';
import { feedPosts } from './data/feed';
import { toggleLike } from './lib/likes';

export function App() {
  const [posts, setPosts] = useState(feedPosts);
  const likedCount = posts.filter((post) => post.liked).length;

  function handleToggleLike(id: number) {
    setPosts(toggleLike(posts, id));
  }

  return (
    <main className="feed">
      <header className="feed-header">
        <h1 className="feed-title">인스타그램</h1>
        <span className="feed-liked-count">좋아요 누른 게시물 {likedCount}개</span>
      </header>
      <Feed posts={posts} onToggleLike={handleToggleLike} />
    </main>
  );
}

 App        posts 상태를 가진다 · handleToggleLike 를 만든다
   │  posts 와 onToggleLike 를 내려보낸다
   ▼
 Feed       받은 배열을 map 으로 그린다
   │  각 카드에 그 게시물과 onToggleLike 를 내려보낸다
   ▼
 PostCard   내 id 를 채운 onToggle 을 만들어 버튼에 준다
   │
   ▼
 LikeButton 눌리면 받은 함수를 부른다

 값은 위에서 아래로 · 알림은 함수를 타고 위로

// apps/web-spa/src/lib/likes.ts
import type { Post } from '../types/instagram';

// 화면이 안 바뀌는 버전 — 원래 있던 객체를 그 자리에서 고친다
export function toggleLikeInPlace(posts: Post[], id: number): Post[] {
  const target = posts.find((post) => post.id === id);

  if (target) {
    target.liked = !target.liked;
    target.likeCount = target.liked ? target.likeCount + 1 : target.likeCount - 1;
  }

  return posts;
}

const a = { likeCount: 1240 };
const b = a;

b.likeCount = 1241;

a === b;  // true — 내용이 바뀌어도 같은 객체를 가리키니까

 그 자리에서 고치기

   이전 값 ─────▶ [ 게시물 배열 ]        내용은 바뀌었지만
                        ▲                React 가 받은 건 같은 배열
   새 값 ───────────────┘                → 다시 안 그린다


 새로 만들기

   이전 값 ─────▶ [ 예전 배열 ]
   새 값 ───────▶ [ 새 배열 ]            서로 다른 배열
                                         → 다시 그린다

// 제대로 동작하는 버전 — 바뀐 게시물만 새로 만들고 나머지는 그대로 쓴다
export function toggleLike(posts: Post[], id: number): Post[] {
  return posts.map((post) =>
    post.id === id
      ? {
          ...post,
          liked: !post.liked,
          likeCount: post.liked ? post.likeCount - 1 : post.likeCount + 1,
        }
      : post,
  );
}

// apps/web-spa/src/components/CommentForm.tsx
import { useState } from 'react';

interface CommentFormProps {
  onSubmit: (content: string) => void;
}

export function CommentForm({ onSubmit }: CommentFormProps) {
  const [content, setContent] = useState('');
  const isEmpty = content.trim() === '';

  return (
    <form
      className="comment-form"
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(content.trim());
        setContent('');
      }}
    >
      <input
        className="comment-input"
        value={content}
        onChange={(event) => setContent(event.target.value)}
        placeholder="댓글 달기..."
        aria-label="댓글 입력"
      />
      <button className="comment-submit" type="submit" disabled={isEmpty}>
        게시
      </button>
    </form>
  );
}

 사용자가 글자를 친다
   ↓
 onChange 가 불린다 (event.target.value 에 새 글자가 들어 있다)
   ↓
 setContent(새 글자)
   ↓
 컴포넌트가 다시 그려진다 (value 가 새 글자)
   ↓
 화면에 그 글자가 보인다

You provided a `value` prop to a form field without an `onChange` handler.
This will render a read-only field. If the field should be mutable use
`defaultValue`. Otherwise, set either `onChange` or `readOnly`.

error TS2345: Argument of type 'ChangeEvent<HTMLInputElement, HTMLInputElement>'
is not assignable to parameter of type 'SetStateAction<string>'.

<button className="comment-submit" type="submit" disabled={isEmpty}>

// apps/web-spa/src/components/PostCard.tsx
import { useState } from 'react';
import type { PostCardProps } from '../types/derived';
import { Avatar } from './Avatar';
import { LikeButton } from './LikeButton';
import { CommentForm } from './CommentForm';

interface PostCardViewProps extends PostCardProps {
  onToggleLike: (id: number) => void;
}

interface DraftComment {
  id: number;
  content: string;
}

export function PostCard({
  id,
  username,
  profileImageUrl,
  imageUrl,
  content,
  liked,
  likeCount,
  commentCount,
  onToggleLike,
}: PostCardViewProps) {
  // 이 댓글은 이 카드만 쓰니까 카드 안에 둔다
  const [comments, setComments] = useState<DraftComment[]>([]);

  function addComment(text: string) {
    setComments([...comments, { id: comments.length + 1, content: text }]);
  }

  return (
    <article className="post-card">
      <Avatar username={username} profileImageUrl={profileImageUrl} />
      <img className="post-image" src={imageUrl} alt={`${username} 의 게시물`} />
      <LikeButton
        liked={liked}
        likeCount={likeCount}
        onToggle={() => onToggleLike(id)}
      />
      <p className="post-content">
        <strong>{username}</strong> {content}
      </p>
      <p className="post-comments">
        댓글 {commentCount + comments.length}개 모두 보기
      </p>
      <ul className="comment-list">
        {comments.map((comment) => (
          <li key={comment.id}>
            <strong>me</strong> {comment.content}
          </li>
        ))}
      </ul>
      <CommentForm onSubmit={addComment} />
    </article>
  );
}

error TS2322: Type 'string' is not assignable to type 'never'.