썸네일 리스트 페이지 만들기 함수 질문입니다.

Question

function ThumbnailList() { const [testList] = useState(initialState: TESTS); return

{testList?.map(callbackfn: (test) => ( {test?.info?.mainUrl}

))}

; } useState 함수에 initialState:와 map 함수에 있는 callbackfn:이 있으면 문제가 생기는데 빼야 하는건가요? 아니면 문법이 버전때문에 다른건가요?

코배투 · Answer

안녕하세요. 강의에서 보이는 initialState 또는 callbackfn 등은 타이핑하는 코드가 아닙니다. VS Code에서 특정 함수마다 어떤 Parameters가 들어가야 하는지 힌트를 주는 기능 덕분에 보이는 것 뿐입니다. 해당 회색 글씨들은 무시하시고 타이핑되는 코드들만 참고하시면 되겠습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이선용님. 질문 주신 코드를 살펴보면 두 가지 문제가 있는 것 같습니다. useState 와 map 함수의 문법 문제가 발생하는 것 같습니다. initialState: 와 callbackfn: 은 JavaScript 문법에서 사용되지 않는 표기 형식입니다. 이러한 표기는 TypeScript에서 사용되는 것으로 보이며, JavaScript/React에서는 이를 제거해야 합니다. 해결 방안 useState 함수 올바른 사용법: useState 를 사용할 때는 기본 상태(initial state)를 인수로 전달합니다. useState(initialState: TESTS) 대신 useState(TESTS) 를 사용하세요. map 함수 올바른 사용법: Array.prototype.map 메서드는 콜백 함수와 함께 사용됩니다. map(callbackfn: (test) => {...}) 대신 map((test) => {...}) 형식으로 사용하세요. 수정된 코드는 아래와 같습니다: import React, { useState } from 'react'; function ThumbnailList() { const [testList] = useState(TESTS); // 초기 상태 설정 return (

{testList?.map((test) => ( {test?.info?.mainUrl}

))}

); } 이처럼 useState 와 map 의 문법을 올바르게 수정하면 문제 없이 작동할 것입니다. 이해가 되셨나요? 궁금한 점이 있다면 편하게 질문해 주세요. 이 문제에 대한 유사한 질문이 있다면 사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요 게시글도 참고해 보세요. 코드를 작성하는 과정에서 발생할 수 있는 오류들을 다루고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.