안녕하세요!

호기롭게 타입스크립트로 리액스 영화 평점 웹서비스 클론코딩 진행하다가 막혀서 질문드립니다.

한시간 반동안 낑낑거리다가 두손 들었습니다.

리액트에서 map 함수 써서 Food라는 Functional component 여러번 렌더링 하는 부분에서 막혔습니다.

type FoodProps = {

key: number

name: string

image: string

}

const Food = ({ name, image }: FoodProps) => {

return (

<>

<h1> I like {name} </h1>

<img src={image} alt={name} />

</>

)

}

const renderFood = ({ key, name, image }: FoodProps) => {

return <Food key={key} name={name} image={image} />

}

const foodILike = [

{

id: 1,

name: "Kimchi",

image:

"http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",

},...,

]

const App = () => {

return <>

{foodILike.map(renderFood)}

</>

}

export default App

renderFood에서는 { key, name, image }로 받고, 아래 map에서는 { id, name, image }로 받는게 문제인 것 같아요. foodILike의 id들을 key로 바꾸니까 이상 없이 잘 나오더라고요.

나중에 개발할 때 공공 API 같은 곳에서 받아온 JSON 파일에 각 항목 구분자가 id(혹은 _id)로 오는 경우가 많을 것 같아서, 그런 경우를 대비해 될 수 있으면 원본의 "id"는 바꾸지 않고 저 renderFood 함수에 그대로 넣어서 실행해보고 싶은데 renderFood 함수에서의 argument에서 "key"라고 썼기 때문에 문제가 되는 것 같습니다. 나중에 어차피 key props는 필요하니까 key props로 출력을 하고 싶고요.

이런 경우에는

1. type conversion 같은 것을 해 주어야 하는지,

2. 아니면 이미 받아온 json 파일의 "id"를 "key"로 바꿔줘야 하는지

아니면 다른 방법으로 해야 하는지, 궁금합니다. 그 때의 solution도 궁금합니다!

--

내용추가 (22.02.08 13:00)

제가 내용 설명이 부족했던 것 같습니다.

renderFood 내 인자도 바꿔보았었고요,

우선은 함수 내 인자를 key에서 id로 바꾸면 이전에 Props 에서 key로 넣었던 부분이 있어서 error가 나오고요 (아래 그림)

그렇게 해서 FoodProps에서 key를 id로 바꾸면 아래 함수컴포넌트 renderFood 안에 Food에서 에러가 나옵니다 (아래 그림)

Food 변수도 건드려보고 이렇게 저렇게 해보았는데 그 이상은 제가 가지고있는 지식 밖의 영역인 것 같아서요.