ajax 2 : 응용3

{ loading ? <div>로딩중</div> : null } 이부분이 표현식이 잘못되었다고 나옵니다 선생님,

onClick의 콜백함수 안이라 표현식이 다른것 같은데,

(loading ? <div>로딩중</div> : null) - 다른 오류

[loading ? <div>로딩중</div> : null] - 같은 오류,..

문제 풀이 접근 방식이 아예 잘못 된건가요? 게시판 ajax로 찾아봣는데 유사한 질문이 없어 질문드립니다.

전문

import logo from './logo.svg';
import './App.css';
import { Button, Navbar, Container, Nav, Row, Col } from 'react-bootstrap';
import data from './data'
import { useState } from 'react';
import { Shoes } from './Shoes';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import { Detail } from './Detail';
import axios from 'axios';

function App() {
  let [product, setProduct] = useState(data);
  let [btnCount, setBtnCount] = useState(2)
  let [loading, setLoading] = useState(true)
  let navigate = useNavigate();

  return (
    <div className="App">

      <Navbar bg="dark" data-bs-theme="dark" className='navbar1' >
        <Container>
          <Navbar.Brand href="#home" className='small0' >KD_Shop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home" onClick={() => { navigate('/') }} className='small' >Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/detail/0') }} className='small' >Cart</Nav.Link>
            <Nav.Link href="#features" className='small' onClick={() => { navigate('/event') }} >Event</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div className='main-bg'>      </div>
      {/* <Link to="/">홈</Link>
      <br />
      <Link to="/detail" >상세페이지</Link> */}

      <Routes>
        <Route path='/' element={
          <Container>
            {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
            <Row>
              {product.map(function (e, index) {
                return (
                  <Col xs={12} md={4} key={index} >
                    <Shoes e={e} index={index} key={index} />
                  </Col>)
              })}
            </Row>
            {btnCount != 4 ?
              (<button onClick={() => {
                setLoading(true)

                //이 표현식이 잘못되었다고 나옴
                { loading ? <div>로딩중</div> : null }

                axios.get(`https://codingapple1.github.io/shop/data${btnCount}.json`).then((결과) => {
                  console.log(결과.data, 결과)
                  let copy = [...product, ...결과.data]
                  setProduct(copy)
                  setBtnCount(btnCount + 1)
                  setLoading(false)
                  console.log(btnCount, loading)
                })
                  .catch(() => {
                    console.log('실패')
                    setLoading(false)
                  })
              }} >버튼</button>) : null}

          </Container>
        } />

        <Route path='/detail/:id' element={<Detail product={product} ></Detail>} />

        <Route path='/event' element={<Event />} >
          <Route path='/event/one' element={<div>첫주문시 양배추즙 서비스</div>} />
          <Route path='/event/two' element={<div>생일 기념 쿠폰받기</div>} />

        </Route>
        <Route path='*' element={<div>없는페이지입니다.</div>} />

      </Routes>
    </div >
  );
}

function Event() {
  return (
    <div>
      <h3>이벤트페이지</h3>
      {/* <Link to="/one" ></Link>
      <br />
      <Link to="/two" ></Link> */}
      <Outlet></Outlet>

    </div>
  )
}

export default App;