jsx문법상 안에선 if문이 정상적으로 작동하지 않나요?

[유승재]

array,object state 변경하는법 강의 도중 <button>태그로 글제목을 바꾸는 것을 버튼을 누를 때마다 글제목이 "여자코트추천","남자코트추천"으로 번갈아가며 바뀌게 만들고 싶어서 코드를 짜봤습니다

그 결과 else()문이 전혀 실행이 되지 않는 현상에 의문이 들어 질문하게 됬습니다. 코드는 아래에 있습니다
왜
----------------------------------------------------------------------------------------------------

import './App.css'
import { useState } from 'react';

export default function App() {

  let [title, titleSc] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
  let [heart, heartSc] = useState(0);
  let sum = 0;
  return (
    <div className="App">
      <div className="black-nav">
        <h4>React Blog</h4>
      </div>
      <button onClick={() => {
                if (sum == 0) {
                  let copy1 = [...title];
                  copy1[0] = "여자 코트 추천";
                  titleSc(copy1);
                  sum++;
                  console.log("제발1");
                } else {
                  let copy2 = [...title];
                  copy2[0] = "남자 코트 추천";
                 titleSc(copy2);
                 sum--;
                console.log(sum);
                }
      }}> 글 수정 </button>
      <div className='list'>

        <h4>{title[0]}<span onClick={() => {
          heartSc(heart + 1)
        }}> ❤</span> {heart} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{title[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{title[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='modal'>
        <h4> 제목 </h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  )
}

function Modal() {
  return (
    <div className='modal'>
      <h4> 제목 </h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
-----------------------------------------------------------------------------------

[codingapple]

재렌더링될 때 마다 안에있는 코드 다시 읽어서 
sum이라는 변수는 매번 초기화되는듯요 밖에쓰거나 합시다

[글쓴이]

글