{result.map((a, i) => (
<div className="list-item" key={i}>
<Link href={"/detail/" + result[i]._id.toString()}>
<h4>{a.title}</h4>
</Link>
<DetailLink />
<p>{a.content}</p>
<Link href={"/modify/" + result[i]._id.toString()}>
<button>수정</button>
</Link>
<button
onClick={(e) => {
let idee = result[i]._id.toString();
fetch("api/abc/" + idee)
.then((r) => {
if (r.status == 200) {
return r.json();
} else {
}
})
.then((result) => {
e.target.parentElement.style.opacity = 0;
setTimeout(() => {
e.target.parentElement.style.display = "none";
}, 1000);
console.log(result);
})
.catch((error) => {
console.log(error);
});
}}
>
삭제
</button>
</div>
))}
위의 코드는 map의 콜백함수안 전체를 return으로 감싸지 않았는데도 잘 작동하는 이유가 궁금합니다.
html부분은 jsx 문법만 가능하기에 반복문으로 배열을 반환하는 map을 사용하는 거라고 하셨는데
return이 없으면 map은 반복만 할 뿐 배열을 반환하지는 않잖아요
{data.map((a, i) => {
return (
<div key={i}>
<p>{a.content}</p>
<p>{a.author}</p>
</div>
);
})}
이 코드는 위의 코드와 달리 return으로 감싸지 않으면 웹페이지에 보이지 않습니다
이렇게 되는게 맞지 않나요?
참고로 둘다 클라이언트 컴포넌트안의 코드입니다.
차이점이 있다면 두번째 코드의 배열인 data는 ajax를 통해 가져온 배열이라는 점입니다.
