react ajax2 강의 숙제 질문

[머텅]

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Navbar, Container, Nav } from 'react-bootstrap'
import data from './data.js'
import { useEffect, useState } from 'react';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Detail from './routes/detail';
import axios from 'axios';

function App() {

  let [shoes, setShoes] = useState(data);
  let navigate = useNavigate();
  let navigate2 = useNavigate();
  let [loading, setLoading] = useState(false);
  let [getCount, setGetCount] = useState(0);

  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">
            <img
              alt=""
              src="/digitama.jpg"
              width="30"
              height="30"
              className="d-inline-block align-top"
            />{' '}
            DIGIWIKI
          </Navbar.Brand>
          <Nav className='me-auto'>
            <Nav.Link href='/'>Home</Nav.Link>
            <Nav.Link href='/detail/0'>Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <button onClick={() => { navigate('/detail') }}>이동버튼</button>
      <button onClick={() => { navigate2(-1) }}>뒤로가기</button>
      <button onClick={() => { }}>상품정렬</button>

      <Routes>
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path='/' element={<><div class="main-bg"></div>
          <div className="container">
            <div className="row">
              {
                shoes.map(function (a, i) {
                  return (<Card shoes={shoes} num={i} />)
                })
              }
            </div>
          </div>
          <button onClick={() => {
            setLoading(true);
            Promise.all([axios.get('https://codingapple1.github.io/shop/data2.json'), axios.get('https://codingapple1.github.io/shop/data3.json')]).then((result) => {
              setGetCount(getCount++)
              if (getCount == 1) {
                let copy = [...shoes, ...result[0].data];
                setShoes(copy);
                setLoading(false);
              }
              else if (getCount == 2) {
                let copy = [...shoes, ...result[1].data];
                setShoes(copy);
                setLoading(false);
              }
              else alert('더 이상 상품 없다');
            })
              .catch(() => {
                alert('요청 실패');
                setLoading(false);
              })
          }}>get버튼</button>
          {
            setLoading ? null : <div>로딩중입니다...</div>
          }
        </>} />

        <Route path='*' element={<div>없는페이지</div>} />
        <Route path='/event' element={<Event />}>
          <Route path='one' element={<div>호롤놀로</div>} />
          <Route path='two' element={<div>후룰룰ㄹ</div>} />
        </Route>
      </Routes>

    </div>
  );
}

function Card(props) {
  return (
    <div className="col-md-4">
      < img src={"https://codingapple1.github.io/shop/shoes" + (props.num + 1) + ".jpg"} width="80%" />
      <h4>{props.shoes[props.num].title}</h4>
      <p>{props.shoes[props.num].price}</p>
    </div>
  )
}

function Event() {
  return (
    <>
      <div>오늘의 이벤트</div>
      <Outlet></Outlet>
    </>
  )
}

export default App;

우선 코드입니다 선생님
갑자기 머리속에 혼돈의 카오스가 와서 질문드립니다
위에 올린 코드가 아닌 App 컴포넌트 바깥에 그냥 일반변수 getCount를 쓰고 get버튼(더보기)을 누를때는 정상적으로 다음 목록을 불러오는데요
위 코드처럼 state로 카운트변수를 선언하면 계속 재렌더링될때마다 초기화돼서 버튼을 누르면 딱 3개만 계속 불러오는 상태가 됩니다
그럼 컴포넌트 안에 state는 하나만 선언해야 하는 것인가요? 
만약에 두개 선언했다 그러면 두번째 state를 변경할때는 어차피 첫번째 state는 재렌더링되면서 처음 선언한 값으로 돌아가버릴거 같은데..
이제 이 리액트가 뭔지 잘 모르겠어요.. state를 App바깥에 두려고 하니까 state는 컴포넌트 안에 있어야 한다고 하더라구요.
가르쳐주세요 선생님! state란 대체 무엇입니까... 재렌더링이란 대체 무엇이란 말입니까...

[codingapple]

재렌더링되어도 state는 초기화되지않습니다 뒤에나오는 state async 강의 어쩌구를 참고합시다 
카운터 이런건 함수바깥에 변수로 만들거나 하면 됩니다

[머텅]

그럼 위 코드에서 왜 getCount라는 카운터변수가 계속 초기화되는걸까요? 콘솔로그 찍어보면 초기화되는걸로 보여서요...
분명 state에다 선언했는데

[codingapple]

getCount가 2로 바뀌기 전에 console.log(getCount)가 먼저 실행되어서 그런듯요

[머텅]

아 제 코드의 콘솔로그 남아있는건 지우다가 미처 다 못지운거구..
실제로 목록 불러와지는게 4,5,6번 목록만 불러와집니다 그래서 계속 state가 계속 초기화된다고 생각했는데.. 코드에 문제가 없나요?

[codingapple]

아마 클릭 서너번 하면 789번 불러와질거같은데 서너번 클릭해봅시다

[머텅]

막 혼자 하다보니까 이상한걸 발견했습니다 센세
setGetCount(getCount++) 이거를 setGetCount(getCount+1)로 바꾸면 잘되는데 이게 어떻게 된 일일까요..?
여기저기서 콘솔 찍어보면 setGetCount(getCount++) 얘만 자꾸 0에서 1되고 1에서 멈춰있는거 같아요
그리고 또 setGetCount(++getCount) 요것도 카운트가 계속 올라가서 잘되는거같아요
state 변경 끝나기 전에 다른 코드 먼저 실행되는 그거랑 깊은 관련이 있는 거시기한 느낌적인 느낌이 드는데 맞습니까 센세

[codingapple]

++를 오른쪽에 붙이면 +1되기 전의 값이 그 자리에 남고 
++를 왼쪽에 붙이면 +1된 값이 그 자리에 남아서 그런듯요 
++는 state = state + 1으로 직접 state를 수정해버리는 문법이라 안쓰는게 좋습니다

[머텅]

그렇군요 감사합니다 센세!!

[글쓴이]

글