js파일을 추가적으로 만들 때 오류

[정법진]

안녕하세요.
현재 쇼핑몰 프로젝트를 14번째 강의까지 들었고
애니메이션 구현까지 잘 되었습니다.

제가 지금까지는 약간의 귀찮음때문에 js파일을 따로 더 만들지 았았는데
소스가 점점 길어지는 것을 느끼면서
js파일을 추가로 만들게 되었습니다.

js파일을 app.jsx파일에 불러오기전에 테스트삼아서 
Details.js파일을 하나 만들어봤는데
이런 오류가 발생하더군요. 
"[plugin:vite:oxc] Unexpected token"
소스는 아래와 같이 작성했습니다.

================================================
function Details()
{
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    < img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%"></img>
                </div>
                <div className="col-md-6 mt-4">
                    <h4 className="pt-5">상품명</h4>
                    <p>상품설명</p>
                    <p>12000원</p>
                    <button className="btn btn-danget">주문하기</button>
                </div>
            </div>
        </div>
    )
}

export default Details;
================================================

아래처럼 배열데이터를 작성할 때는 오류가 발생하지 않던데
함수형태로 소스를 작성하면 오류가 발생하는 것 같아요.

================================================
function Details()
{
    return(
    {
        id: 0,
        image : "https://codingapple1.github.io/shop/shoes1.jpg",
        title: "White and Black",
        content: "Born in France",
        price : 120000
    })
}

export default Details;
================================================

원인이 무엇일까요?

• 이 게시글은 정법진에 의해 1 일, 21 시간 전에 수정됐습니다.
• 이 게시글은 정법진에 의해 1 일, 21 시간 전에 수정됐습니다.

[codingapple]

컴포넌트 뱉는 파일은 .jsx 확장자로 만들어봅시다

[정법진]

네. 말씀하신대로 jsx파일로 작성하니 잘 되네요.

그러면
컴포넌트를 import로 가져올 때는 jsx파일로 작성하고
배열속성을 import로 가져올 때는 js파일로 작성하고

이런 식으로 구분을 해야되는 건가요?

[codingapple]

vite 쓸 땐 그럽시다

[글쓴이]

글