🎨 21. 렌더 트리 & key의 진실: 컴포넌트 동일성의 비밀

// ❌ 영철이의 초기 구현 — 점수가 유지되는 버그를 품고 있다
function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true); // 현재 플레이어 토글 상태
 
  return (
    <div>
      {/* 🚨 영철이의 오해: "isPlayerA가 바뀌면 완전히 다른 사람이니까 점수 리셋되겠지?" */}
      {isPlayerA ? (
        <Counter person="영호" /> // isPlayerA=true 일 때 렌더링
      ) : (
        <Counter person="영철" /> // isPlayerA=false 일 때 렌더링
      )}
      <button onClick={() => setIsPlayerA(!isPlayerA)}>
        다음 플레이어
      </button>
    </div>
  );
}
 
function Counter({ person }) {
  const [score, setScore] = useState(0); // 각자의 점수
 
  return (
    <div>
      <h1>{person} 의 점수: {score}</h1>
      <button onClick={() => setScore(score + 1)}>+1</button>
    </div>
  );
}

// ✅ 렌더 트리 위치 개념을 코드로 표현하면
function Scoreboard() {
  return (
    <div>
      {/* 위치 0: 여기에 무엇이 오든 React는 "div의 첫 번째 자식"으로 인식 */}
      <Counter person="영호" />
 
      {/* 위치 1: div의 두 번째 자식 */}
      <Counter person="영철" />
    </div>
  );
}

// 🧪 실험: 같은 컴포넌트를 두 곳에서 렌더링
function App() {
  return (
    <div>
      {/* 이 둘은 같은 Counter 함수를 사용하지만... */}
      <Counter /> {/* 위치 A: 자체적인 상태를 가짐 */}
      <Counter /> {/* 위치 B: 위치 A와 완전히 독립적인 상태를 가짐 */}
    </div>
  );
}

// 💡 React 내부 개념 (의사 코드, 실제 구현과 다를 수 있음)
const internalStateStore = {
  "App > div > Counter[0]": { count: 5 },  // 위치 A
  "App > div > Counter[1]": { count: 0 },  // 위치 B
};
// Counter 함수가 실행될 때 useState(0)는
// 현재 렌더링 중인 위치의 슬롯을 찾아서 값을 반환해요

// 🧪 조건부 렌더링 실험
function App() {
  const [showCounter, setShowCounter] = useState(true);
 
  return (
    <div>
      {showCounter && <Counter />} {/* true면 마운트, false면 언마운트 */}
      <button onClick={() => setShowCounter(!showCounter)}>
        토글
      </button>
    </div>
  );
}

// 🔴 상태 보존 함정 — 영철이의 Scoreboard 버그 재현
function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
 
  return (
    <div>
      {/*
        React 가 보는 것: "div의 첫 번째 자식 = Counter 타입"
        isPlayerA가 true → false 로 바뀔 때:
        - 이전 트리: Counter (person="영호")
        - 새 트리:   Counter (person="영철")
        - React 판단: "같은 위치, 같은 타입(Counter) → 기존 인스턴스 유지, prop만 변경!"
        - 결과: score 상태가 유지됨 😱
      */}
      {isPlayerA ? <Counter person="영호" /> : <Counter person="영철" />}
      <button onClick={() => setIsPlayerA(!isPlayerA)}>다음 플레이어</button>
    </div>
  );
}

// ✅ 다른 타입으로 교체 → 상태 완전 리셋 확인
function App() {
  const [showCounter, setShowCounter] = useState(true);
 
  return (
    <div>
      {showCounter ? (
        <Counter />   // Counter 타입 — 위치 0
      ) : (
        <p>점수를 보려면 버튼을 누르세요</p>  // p 타입 — 위치 0
      )}
      {/*
        Counter → p 로 바뀔 때:
        React 판단: "위치 0의 타입이 Counter에서 p로 달라졌다!"
        동작: Counter 언마운트 (상태 파괴) → p 새로 마운트
      */}
      <button onClick={() => setShowCounter(!showCounter)}>토글</button>
    </div>
  );
}

// ❌ 순진한 해결책 — 다른 컴포넌트 래퍼로 감싸기
// (이 방법은 동작하지만 코드가 지저분해요)
function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
 
  return (
    <div>
      {isPlayerA ? (
        <div>  {/* div로 감싸서 "다른 타입"처럼 보이게 하려는 시도 */}
          <Counter person="영호" />
        </div>
      ) : (
        <section>  {/* section은 div와 다른 타입 */}
          <Counter person="영철" />
        </section>
      )}
      {/*
        div와 section은 다른 타입이니까 타입 불일치 → 상태 리셋
        하지만 이건 의미 없는 래퍼를 추가하는 지저분한 방식이에요
      */}
    </div>
  );
}

// ✅ key로 영철이의 Scoreboard 버그 완벽 해결
function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
 
  return (
    <div>
      {isPlayerA ? (
        <Counter
          key="영호"   // key="영호" → 이 자리의 주민등록번호
          person="영호"
        />
      ) : (
        <Counter
          key="영철"   // key="영철" → 다른 주민등록번호 → 완전히 다른 인스턴스!
          person="영철"
        />
      )}
      {/*
        isPlayerA가 true → false 로 바뀔 때:
        - 이전 트리: Counter (key="영호", score=5)
        - 새 트리:   Counter (key="영철")
        - React 판단: "key가 다르다! 완전히 다른 인스턴스다!"
        - 동작: key="영호" Counter 언마운트 → key="영철" Counter 새로 마운트
        - 결과: score는 0으로 리셋됨 ✅
      */}
      <button onClick={() => setIsPlayerA(!isPlayerA)}>다음 플레이어</button>
    </div>
  );
}

// ❌ key 없는 목록 렌더링의 재앙
const studyMembers = ['영수', '영철', '영호'];
 
function MemberList() {
  return (
    <ul>
      {studyMembers.map((name) => (
        <MemberItem name={name} />  // key 없음!
      ))}
    </ul>
  );
}
 
// 만약 '영수'를 목록 앞에서 제거하면:
// 변경 전: ['영수', '영철', '영호']
// 변경 후: ['영철', '영호']
 
// React는 position으로만 비교:
// 위치 0: '영수' MemberItem → '영철' MemberItem (업데이트)
// 위치 1: '영철' MemberItem → '영호' MemberItem (업데이트)
// 위치 2: '영호' MemberItem → 없음 (제거)
 
// 결과: 3개가 2개의 업데이트 + 1개 제거로 처리됨
// 만약 MemberItem 안에 상태가 있다면 상태가 엉뚱한 아이템으로 옮겨가는 버그 발생!

// ✅ key 있는 목록 렌더링 — 올바른 방식
function MemberList() {
  return (
    <ul>
      {studyMembers.map((name) => (
        <MemberItem key={name} name={name} />  // key로 신원 명확히 표시
      ))}
    </ul>
  );
}
 
// 이제 React는 key로 누가 누군지 추적:
// key="영수" 제거 → 해당 인스턴스만 언마운트
// key="영철", key="영호" 는 위치가 바뀌어도 상태 유지됨 ✅

// ✅ 패턴 1: key를 숫자로 관리해서 제출 시 폼 강제 리셋
function CommentSection({ postId }) {
  const [formKey, setFormKey] = useState(0); // 폼의 주민등록번호 역할
 
  const handleCommentSubmit = async (content) => {
    await submitComment({ postId, content }); // API 호출
    setFormKey((prev) => prev + 1);
    // key가 0 → 1 로 바뀜 → React는 완전히 새 PostCommentForm을 마운트
    // PostCommentForm 내부의 모든 useState가 초기값으로 리셋됨
  };
 
  return (
    <div>
      <h3>댓글 작성</h3>
      <PostCommentForm
        key={formKey}           // formKey가 바뀔 때마다 새 인스턴스로 교체됨
        onSubmit={handleCommentSubmit}
      />
    </div>
  );
}
 
// PostCommentForm 내부 (상태가 여러 개일 때 특히 유용)
function PostCommentForm({ onSubmit }) {
  const [content, setContent] = useState('');       // 댓글 내용
  const [isAnonymous, setIsAnonymous] = useState(false); // 익명 여부
  const [mood, setMood] = useState('neutral');      // 감정 태그
 
  // key가 바뀌면 이 상태들이 모두 초기값으로 리셋됨
  // 일일이 setContent(''), setIsAnonymous(false), setMood('neutral') 안 해도 됨!
 
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(content); }}>
      <textarea value={content} onChange={(e) => setContent(e.target.value)} />
      {/* ... 기타 필드들 */}
      <button type="submit">댓글 작성</button>
    </form>
  );
}

// ✅ 패턴 2: 연락처별 ChatWindow를 완전히 다른 인스턴스로 분리
function DirectMessagePage() {
  const [selectedContact, setSelectedContact] = useState('영호');
 
  return (
    <div style={{ display: 'flex' }}>
      {/* 연락처 목록 */}
      <ContactList
        onSelect={setSelectedContact}
        selected={selectedContact}
      />
 
      {/*
        key={selectedContact}로 연락처마다 완전히 다른 ChatWindow 인스턴스 생성
        영호 → 영철 전환 시:
        - key="영호" ChatWindow 언마운트 (입력 중인 내용, 스크롤 위치 등 모두 초기화)
        - key="영철" ChatWindow 새로 마운트 (영철과의 대화 이력 로드 시작)
      */}
      <ChatWindow
        key={selectedContact}  // 연락처가 바뀌면 완전히 새 채팅창을 열어요
        contact={selectedContact}
      />
    </div>
  );
}
 
function ChatWindow({ contact }) {
  const [message, setMessage] = useState('');      // 현재 입력 중인 메시지
  const [messages, setMessages] = useState([]);    // 대화 이력
 
  // contact가 바뀌면(= key가 바뀌면) 이 useEffect가 새 인스턴스에서 실행됨
  // message, messages 모두 초기값에서 시작
  useEffect(() => {
    loadChatHistory(contact).then(setMessages); // 해당 연락처의 채팅 이력 로드
  }, []); // 마운트 시 한 번만 실행 (key 변경 = 새 마운트이므로 OK)
 
  return (
    <div>
      <h2>{contact} 와의 대화</h2>
      {/* 대화 이력 표시 */}
      <div>{messages.map((msg) => <MessageBubble key={msg.id} msg={msg} />)}</div>
      {/* 메시지 입력 */}
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
    </div>
  );
}

// ✅ 패턴 3: postId를 key로 사용해서 포스트별 상태 격리
function PostEditor({ postId }) {
  // postId가 바뀌면(다른 포스트를 편집하러 가면) 에디터 전체가 리셋됨
  return (
    <PostEditorContent
      key={postId}  // postId = 에디터의 신원증명서
      postId={postId}
    />
  );
}
 
function PostEditorContent({ postId }) {
  const [title, setTitle] = useState('');         // 제목 입력 상태
  const [content, setContent] = useState('');     // 내용 입력 상태
  const [isPreview, setIsPreview] = useState(false); // 미리보기 모드
 
  // postId가 같으면(같은 포스트를 계속 편집) 상태 유지
  // postId가 달라지면(다른 포스트로 이동) key 변경 → 상태 리셋 → 이 useEffect 재실행
  useEffect(() => {
    loadPostData(postId).then(({ title, content }) => {
      setTitle(title);   // 기존 포스트 데이터로 초기화
      setContent(content);
    });
  }, []); // 마운트 시 한 번만 (key 변경 = 새 마운트)
 
  return isPreview
    ? <PostPreview title={title} content={content} />
    : <PostForm title={title} content={content} onTitleChange={setTitle} onContentChange={setContent} />;
}

// ✅ 패턴 4: 검색어가 바뀔 때마다 결과 목록 상태를 리셋
function SearchPage() {
  const [query, setQuery] = useState('');
  const [submittedQuery, setSubmittedQuery] = useState('');
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="스터디 검색..."
      />
      <button onClick={() => setSubmittedQuery(query)}>검색</button>
 
      {/*
        submittedQuery가 바뀔 때마다 SearchResults를 완전히 새 인스턴스로 교체
        → SearchResults 내부의 페이지네이션 상태(currentPage), 정렬 상태 등이 리셋됨
      */}
      {submittedQuery && (
        <SearchResults
          key={submittedQuery}   // 검색어마다 새 인스턴스!
          query={submittedQuery}
        />
      )}
    </div>
  );
}

// 🚨 절대 금지 패턴 — 렌더 함수 안에 컴포넌트 정의
function StudyPostList() {
  const [searchQuery, setSearchQuery] = useState('');
 
  // 💣 매 렌더마다 새로운 함수 참조가 만들어짐!
  // StudyPostList가 렌더링될 때마다 SearchInput은 완전히 새로운 함수가 돼요
  function SearchInput() {
    const [inputValue, setInputValue] = useState('');
 
    return (
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="스터디 검색..."
      />
    );
  }
 
  const posts = filterPosts(allPosts, searchQuery); // 검색 필터링
 
  return (
    <div>
      {/*
        SearchInput은 매 렌더마다 새로운 함수 참조 = 새로운 컴포넌트 타입
        React 판단: "이전 렌더의 SearchInput과 이번 렌더의 SearchInput은 다른 타입이다!"
        동작: 매 렌더마다 SearchInput을 언마운트 후 새로 마운트
        결과: inputValue 상태가 매 렌더마다 '' 로 리셋 → 글자를 입력할 수 없음! 😱
      */}
      <SearchInput />
      <ul>
        {posts.map((post) => (
          <PostItem key={post.id} post={post} />
        ))}
      </ul>
    </div>
  );
}

// 🧪 개념 증명 (의사 코드)
const render1 = () => {
  function SearchInput() { ... }  // 주소: 0x1234
  return <SearchInput />;
};
 
const render2 = () => {
  function SearchInput() { ... }  // 주소: 0x5678 (다른 함수 객체!)
  return <SearchInput />;
};
 
// React가 보는 것:
// render1의 SearchInput: type = 0x1234
// render2의 SearchInput: type = 0x5678
// 결론: 타입이 달라졌다 → 언마운트 + 새 마운트!

// ✅ 올바른 해결책: 컴포넌트를 렌더 함수 바깥에 정의
// SearchInput을 모듈 최상위 레벨에 정의 → 함수 참조가 불변(stable reference)
function SearchInput({ onSearch }) {
  const [inputValue, setInputValue] = useState('');
 
  return (
    <input
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      onKeyDown={(e) => e.key === 'Enter' && onSearch(inputValue)}
      placeholder="스터디 검색..."
    />
  );
}
 
// StudyPostList는 이제 SearchInput을 import해서 사용
function StudyPostList() {
  const [searchQuery, setSearchQuery] = useState('');
 
  const posts = filterPosts(allPosts, searchQuery);
 
  return (
    <div>
      {/* SearchInput은 항상 같은 함수 참조 → 렌더마다 재사용 → 상태 유지 ✅ */}
      <SearchInput onSearch={setSearchQuery} />
      <ul>
        {posts.map((post) => (
          <PostItem key={post.id} post={post} />
        ))}
      </ul>
    </div>
  );
}

// ❌ 이것도 절대 금지 — 화살표 함수로 컴포넌트 정의도 동일한 문제
function ParentComponent() {
  const ChildComponent = () => {  // 매 렌더마다 새 함수 객체
    const [value, setValue] = useState(0);
    return <button onClick={() => setValue(v => v + 1)}>{value}</button>;
  };
 
  return <ChildComponent />; // 상태가 매번 리셋됨 💣
}
 
// ✅ 바깥으로 꺼내기
const ChildComponent = () => {  // 한 번만 생성됨
  const [value, setValue] = useState(0);
  return <button onClick={() => setValue(v => v + 1)}>{value}</button>;
};
 
function ParentComponent() {
  return <ChildComponent />; // 항상 같은 참조 → 상태 유지 ✅
}

// 이런 패턴이 있으면 범인
function ParentComponent() {
  // ⚠️ 렌더 안에 컴포넌트 정의 발견!
  function InputField() {
    const [text, setText] = useState('');
    return <input value={text} onChange={e => setText(e.target.value)} />;
  }
  return <InputField />;  // 매 렌더마다 리셋됨
}

// InputField를 파일 최상위로 꺼내기
function InputField() {
  const [text, setText] = useState('');
  return <input value={text} onChange={e => setText(e.target.value)} />;
}
 
function ParentComponent() {
  return <InputField />;  // 이제 안정적으로 작동
}

// 이런 패턴이 있으면 범인
{isPlayerA ? <Counter person="영호" /> : <Counter person="영철" />}
// 같은 위치, 같은 타입 → 상태 유지됨

// key를 추가해서 인스턴스 명시적 분리
{isPlayerA
  ? <Counter key="영호" person="영호" />
  : <Counter key="영철" person="영철" />
}

function Parent() {
  const [formKey, setFormKey] = useState(0);
 
  const handleSubmit = async (data) => {
    await submitData(data);
    setFormKey(prev => prev + 1); // key 변경 → 폼 전체 리셋
  };
 
  return <MyForm key={formKey} onSubmit={handleSubmit} />;
}

function MyForm({ onSubmit }) {
  const [value, setValue] = useState('');
 
  const handleSubmit = async () => {
    await onSubmit(value);
    setValue(''); // 제출 후 수동 리셋
  };
 
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

<ChatWindow
  key={selectedContact}  // 연락처가 바뀌면 새 인스턴스
  contact={selectedContact}
/>

// ❌ key 없음
posts.map(post => <PostItem post={post} />)
 
// ❌ index를 key로 사용 (목록 순서가 바뀔 수 있는 경우)
posts.map((post, index) => <PostItem key={index} post={post} />)
// 정렬, 추가, 삭제가 일어나면 key-인스턴스 매핑이 엉킴
 
// ❌ 중복 key
posts.map(post => <PostItem key="item" post={post} />)

// ✅ 고유하고 안정적인 ID 사용
posts.map(post => <PostItem key={post.id} post={post} />)
 
// ✅ index는 목록이 절대 변하지 않을 때만 허용
staticItems.map((item, index) => <Item key={index} item={item} />)

function App() {
  const [isAdmin, setIsAdmin] = useState(true);
  return (
    <div>
      {isAdmin ? <UserPanel role="admin" /> : <UserPanel role="viewer" />}
    </div>
  );
}

function ChatPage() {
  const [activeContact, setActiveContact] = useState('영호');
 
  return (
    <ChatWindow
      _______________    // 여기에 무엇을 써야 할까요?
      contact={activeContact}
    />
  );
}

function StudySearchPage() {
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState([]);
 
  // (A) 매 렌더마다 새로 생성되는 컴포넌트
  const StudyFilter = () => {
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [sortOrder, setSortOrder] = useState('latest');
 
    return (
      <div>
        <select value={selectedCategory} onChange={e => setSelectedCategory(e.target.value)}>
          <option value="all">전체</option>
          <option value="frontend">프론트엔드</option>
        </select>
        <select value={sortOrder} onChange={e => setSortOrder(e.target.value)}>
          <option value="latest">최신순</option>
          <option value="popular">인기순</option>
        </select>
      </div>
    );
  };
 
  return (
    <div>
      <input
        value={keyword}
        onChange={e => setKeyword(e.target.value)}  // (B) 입력 시 StudySearchPage 리렌더링
      />
      <StudyFilter />  {/* (C) 리렌더링될 때마다 새 타입으로 인식됨 */}
      <SearchResults results={results} />
    </div>
  );
}

// 코드 A
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      {count % 2 === 0 ? <Counter /> : <Counter />}
      <button onClick={() => setCount(c => c + 1)}>증가</button>
    </div>
  );
}
 
// 코드 B
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      {count % 2 === 0
        ? <Counter key="even" />
        : <Counter key="odd" />
      }
      <button onClick={() => setCount(c => c + 1)}>증가</button>
    </div>
  );
}