card 컴포넌트 숙제 질문 드립니다

[dust]

import { useState } from "react";
import data from '../data';
const Post = () => {
    let [item] = useState(data);
    const [title, setTitle] = useState('');
    const [img, setImg] = useState([
        '64f2e3bfa8f54698fb5228aadad5c7a07909ae7f',
        '72a591baa05fb27ad8adac973de52f1e606bf473',
        'dfaf657304f2816b514692d36e761f7440f4d531'
    ]);
    return(
        <div>
            < img src={process.env.PUBLIC_URL + `/img/1a04cafd9593925989a9589cc4531377a7695699.gif`} alt=""/>
            <div>
                <h1>글을 작성해주세요.</h1>
                <input onChange={(e) => {
                    setTitle(e.target.value);
                }} />
                <ImgBox img={img} item={item}/>
            </div>
        </div>
    )
}

const ImgBox = ({img, item}) => {
    return(
        <div className="img-item">
            {img.map((value, idx) =>
            <div>
                <img key={idx} src={process.env.PUBLIC_URL + `/img/${value}.jpg`} alt="이미지"/>
                {/* 😢 */}
                {item.map((value) =>
                    <>
                        <p>{value.id}. {value.title}</p>
                        <p>{value.content}</p>
                        <p>{value.price}</p>
                    </>
                )}
            </div>
            )}
        </div>
    )
}

export default Post;


강의는 숙제 해설까지 들었습니다.. 알려주신 것처럼 하면 잘 나오는데
이미지명 때문에 img.map 함수 내에서 img index 값을 item.map에도 적용 시켜서 가져오려고 합니다
가능한 방법일까요 ? 아무리 생각해도 답이 안 나와서 질문 남겨봅니다..

[codingapple]

크롬 개발자도구에서 이미지 경로 잘 나오나 확인해봅시다

[dust]

이미지는 문제없이 잘 나오는데 item.map 사용했더니
data 값이 이미지 밑으로 3개씩 나와서 문제입니다..😢

[codingapple]

map안에 map 쓰지말고 바깥에 쓰면 될듯요

[dust]

map을 따로 쓰면 img 3개 연달아 나오고 item text 값이 연달아 3개씩 나와서 그렇습니다
바깥에 쓰는 방법 말고 img.map((value, idx) => ~~~ ) 의 idx를 가져와 
item.map에도 적용 시킬 순 없을까요???

이미지처럼 컴포넌트 안에서 덩어리처럼 만들어보려구요


앗 만지다보니 해결 했습니다!
img.map 안 item 뒤에 [idx] 붙여줬더니 잘 나오네요 왜 이 생각을 못했는지ㅠㅠ
감사합니다

[글쓴이]

글