props로 받은 배열형 데이터를 map()으로 호출하고 반환
프로젝트에 관한 내용은 구조가 같고 추후에 수정 또는 추가가 되는 부분이기 때문에 카드형으로 컴포넌트를 생성하고, 경로 이동 또는 모달형식으로 프로젝트 소개글을 넣었다.
구조
App js > Router, fetch를 이용하여 데이터를 호출 => Main컴포넌트내에 데이터를 넘겨준다.
main js > ImgSlide, About 컴포넌트 => About컴포넌트에 해당 데이터를 다시 넘겨준다.
- 카테고리 클릭시 해당 데이터가 콘텐츠로 렌더링
About js > Category js 와 Contents 컴포넌트 분리 : 카테고리 클릭시 콘텐츠가 변경됨
Contents에 해당하는 컴포넌트 : Tech Stack과 Workexperience, DesignSkill은 하드코딩하고 Project와 Toy Project에 카드형 컴포넌트를 만들었다.
props로 받아온 데이터를 프로젝트를 넣을 컴포넌트에 넘겨주었다.
- Project Card : 콘텐츠에 있는 카드형 컴포넌트 내에 받은 데이터를 map을 이용하여 id를 키값으로 데이터만큼 카드가 생성되게 작업하였다.
카드 내에 프로젝트 메인이미지와 제목 , 간단한 소개글을 넣고 Reademe와 Blog버튼을 생성하여 해당 경로로 이동하여 프로젝트에 대한 내용을 볼수있다.
또한 프로젝트 또는 토이 프로젝트 카드에 있는 프로젝트소개 버튼 또는 더보기 버튼으로 사이트에서 바로 프로젝트에 대한 내용을 볼수있게 구성하였다.
🚧 Array.prototype.map() expects a value to be returned at the end of arrow function발생
array.map(()=> ()) : 로직을 사용하지 않고 바로 렌더링하는 경우
array.map(()=>{return} : 렌더링 전에 어떠한 변수를 선언하거나 조건을 처리한후 렌더링하는 경우 (렌더링 될 부분은 return 뒤에 넣어준다.)
프로젝트 소개의 같은 경우 카데고리 처럼 탭의 개념이 아닌 key값을 id로 지정하고 같은 id로 된 데이터를 렌더링을 하고 싶었다.
// ProjectDetail.js
{project.map((projectList) => {
if (projectList.id === introduce) {
return (
<div key={projectList.id} className="listWrap">
...
</div>
);
}
})}프로젝트 소개글을 넣는 과정에서 발생한 warning메세지
props로 받아온 배열형태의 데이터를 map함수로 호출하여 배열을 반환하는 과정에서 나타난 메세지
화살표 함수의 반환에 대한 경고문인것 같다.
문제해결
stackoverflow에서 나와 같이 If문을 사용하여 조건을 처리한후 렌더링하는 경우에 같은 경고메세지를 받은 것을 찾아볼 수 있었다.
해결방안에 대한 제시를 남겨놓은 글중에 filter를 사용하여 조건을 처리하는 방법도 있었지만 나는 지금의 코드에서 약간만 수정하였다.
// ProjectDetail.js
function ToyPrjDetail({ project}) {
return (
<>
{project.map((projectList) => {
if (projectList.id !== introduce) return null;
return (
<div key={projectList.id} className="listWrap">
...
</div>
);
})}
</>✏️ 이렇게 수정을 하여 해결은 되었지만 배열인 데이터를 map으로 호출하여 return을 할때 조건문을 넣을경우 종종 보이는 경고 메세지 인것같다.
filter 사용할때에도 이같은 경고 메세지가 떴는데 좀 더 정확히 공부해야겠다. 경고 메세지가 발생하였을때 브라우저에 렌더링되는것에 문제는 없지만 꼭 오늘처럼 해결하고 지나가도록 하자. 더 자세한 내용은 공부하면서 채워나가자!
