인프런 커뮤니티 질문&답변
작성한 질문수
썸네일 리스트 페이지 만들기 함수 질문입니다.
해결된 질문
작성
·
74
0
function ThumbnailList() {
const [testList] = useState(initialState: TESTS);
return <div>
{testList?.map(callbackfn: (test) => (
<img src={test?.info?.thumbImage} alt={test?.info?.mainUrl} key={test?.info?.mainUrl} />))}
</div>;
}useState 함수에 initialState:와 map 함수에 있는 callbackfn:이 있으면 문제가 생기는데 빼야 하는건가요? 아니면 문법이 버전때문에 다른건가요?
답변 2
2
안녕하세요.
강의에서 보이는 initialState 또는 callbackfn 등은 타이핑하는 코드가 아닙니다. VS Code에서 특정 함수마다 어떤 Parameters가 들어가야 하는지 힌트를 주는 기능 덕분에 보이는 것 뿐입니다.
해당 회색 글씨들은 무시하시고 타이핑되는 코드들만 참고하시면 되겠습니다.
2
안녕하세요, 인프런 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 (
<div>
{testList?.map((test) => (
<img src={test?.info?.thumbImage} alt={test?.info?.mainUrl} key={test?.info?.mainUrl} />
))}
</div>
);
}
이처럼 useState와 map의 문법을 올바르게 수정하면 문제 없이 작동할 것입니다.
이해가 되셨나요? 궁금한 점이 있다면 편하게 질문해 주세요. 이 문제에 대한 유사한 질문이 있다면 사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요 게시글도 참고해 보세요. 코드를 작성하는 과정에서 발생할 수 있는 오류들을 다루고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.