-
안녕하세요 선생님!
localStorage를 사용하여 '최근본상품' 컴포넌트에 이미지를 띄우려 합니다!
이것 저것 시도해보다보니 강의에서 알려주신 부분과 코드가 많이 달라졌는데, 그래도 띄워지는데 성공하였습니다.
그러나 최근본상품이 한 가지밖에 적용되지 않아서, 해결 방법을 끝내 찾지 못하여 질문드립니다 ㅠㅠ
Detail.js 페이지에 setItem을 사용하여 담은 뒤, LastProduct.js컴포넌트에 getItem으로 붙여오는 방식으로 진행하였습니다.
아래 Detail.js 코드 전달드립니다.
const Detail = (props) => {
let { id } = useParams();
let productId = props.state.find(function(a) {
return a.id == id;
});// info라는 state를 정의하여, 객체 형태로 담았습니다.
let [info, setInfo] = useState([{
id: productId.id,
img: productId.img,
title: productId.title,
content: productId.content,
price: productId.price
}])// info를 setItem안에 담았습니다
localStorage.setItem('items', JSON.stringify(info));
return (
// 코드생략
)
};
아래는 LastProduct.js 코드입니다. (최근본상품을 우측 하단에 표시하는 레이아웃을 담는 컴포넌트입니다)
const LastProduct = (props) => {
let [late, setLate] = useState([]); // late라는 state를 만들어두고 빈배열을 놓았습니다useEffect(() => {
let info = localStorage.getItem('items'); // getItem으로 받아왔습니다
if (info == null) {
info = []
}
else {
info = JSON.parse(info);
}
setLate(info) // setLate 변경함수 안에 담았습니다.
}, []);
return (
<div className="LastProduct">
<div className="LastProduct_title">최근 본 상품</div>
<ul>
{
late.map((a, i) => {
return (
<li key={i}><img src={late[i].img} /></li>
)
})
}
</ul>
</div>
);
};강의에서 Detail.js 페이지의 useEffect 안에 setItem과 getItem이 함께 담겨있는 부분을 두개의 컴포넌트로 나눠서
Detail.js에서는 setItem을 하고, 최근본상품 컴포는트에는 getItem으로 받아오는 식으로 진행하다보니
배열이 아니라고 계속 오류가 떠서 , 제가 아직 자료형에 대한 이해가 깊지 못한 탓에
콘솔로 확인해가며 코드를 변경하고 변경하다보니
위와 같이 코드가 흘러가었고
결국 화면에 잘 나오기는 하였으나,
최근본상품들마다 뜨는게 아니라 한 가지 상품만 뜨게 되어 이렇게 질문드립니다 ㅠㅠ
제가 코드에 대한 접근을 아예 잘못하고있는지,
아니면 반복문 내의 문제인지 모르겠어서 질문드립니다 ㅠ.ㅠ
위와같은 코드를 실행했을 때 화면에 보여지는 모습은 아래 사진 첨부드립니다!
- 답변은 로그인 후 가능합니다.