'props를 응용한 상세페이지 만들기' 강의 질문입니다

[머텅]

모달창의 제목을 클릭한 것에 맞춰서 바꾸는 과제에 대해서 궁금한게 생겼어요

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

function App() {

  let post = '강남 우동 맛집';
  let [글제목, b] = useState(['남자 코트 추천', '강남 우동 맛집', '맛집 추천']);
  let [따봉, c] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  var titlenum = 2;

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      {/* <div className='list'>
        <h4>{글제목[0]} <span onClick={() => {
          c(따봉 + 1);
          console.log(글제목)
        }}>👍</span> {따봉} <button onClick={() => {
          let copy = [...글제목];
          copy[0] = '여자 코트 추천';
          b(copy);
        }}>다른글</button><button onClick={() => {
          let copy = [...글제목];
          copy = copy.sort();
          b(copy);

        }}>정렬</button></h4>
        <p>2월 17일 발행</p>
      </div>

      <div className='list'>
        <h4 onClick={() => { setModal(!modal) }}>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div> */}

      {
        글제목.map(function (a, i) {
          return (
            <div className='list' key={i}>
              <h4 onClick={()=>{setModal(!modal);
              titlenum=i;
            console.log(titlenum);}}>{글제목[i]}<span onClick={() => {
                let copy = [...따봉];
                copy[i]++
                c(copy);
              }}> 👍</span> {따봉[i]}</h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      }

      {
        modal == true ? <Modal color='skyblue' 글제목={글제목} b={b} titlenum={titlenum}/> : null
      }
    </div>
  );
}

function Modal(props) {
  return (
    <>
      <div className="modal" style={{background : props.color}}>
        <h4>{props.글제목[props.titlenum]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={()=>{let copy=[...props.글제목];
        copy[0]='여자 코트 추천';
        props.b(copy)}}>글수정</button>
        <button onClick={()=>{whatnum(props.titlenum)}}>num</button>
      </div>
    </>
  )
}

function whatnum(num) {
  console.log(num);
}
export default App;

============================
이런 코드를 짰는데...
1. 저 titlenum을 useState를 써서 선언하면 잘 바뀌는데 왜 그냥 변수로 하면 아예 안바뀔까요?
2. 궁금해서 콘솔 출력해보려고 여러번 시도했는데 <script>console.log(titlenum)</script> 이런 건 아예 안 먹히더라구요.. jsx 문법이라 그런건가..? 
   그래서 함수를 하나 만들어서 콘솔 출력을 이렇게 힘겹게 해봤는데, react를 사용하면 원래 콘솔출력을 하면서 확인하는게 어려워지는건가요? 좀 간단하게 콘솔 프린트 할 수 있는 방법이 따로 있을까요?

선생님 늘 빠르게 답변 달아주셔서 정말 감사드립니다만 제가 머리가 빡통이라 조금만 더 친절하게 설명해주신다면 더할나위없이 행복할 것 같습니다.
만수무강하세요 teacher..

[codingapple]

함수가 재렌더링되면 함수안에 있는 use 어쩌구들 빼고 전부 다시 읽어서 그렇습니다 
console.log는 함수같은거나 jsx중괄호 안에 씁시다

[머텅]

모달창이 보일때 페이지 전체가 재렌더링이 돼서 그런거라면...
왜 제가 map함수안에 쓴 console.log(titlenum)은 제대로 0,1,2를 클릭마다 출력하고
Modal 컴포넌트 안에 쓴 whatnum 함수는 항상 2만 뱉는걸까요?
모달창이 뜰때 재렌더링이 되면서 titlenum 변수를 다시 2로 초기화하는거면 map함수안에 console.log(titlenum)도 계속 2가 나와야할거같아서요..!
멍청해서 죄송합니다 센세..

[codingapple]

map 안에선 반복문 돌 때 마다 titlenum=i; 로 변수를 바꿔서 출력해서 그런듯요

[글쓴이]

글