Card와 Detail을 props로 데이터 연결하기

상위컴포넌트에서 받은 데이터를 받아 하위컴포넌트에 넘겨주기

프로젝트 카테고리에 해당하는 콘텐츠 컴포넌트에는 상위컴포넌트인 App.js에서 받은 배열형 데이터를 map()으로 연결하여 id인 키값의 순서대로 카드를 구현하였다.
detail page를 따로 지정하지 않고 modal로 각 카드별 프로젝트 소개가 담긴 데이터를 구현하려 한다.

1. json으로 만든 데이터

"toyproject": [
    {
      "id": 0,
      "projectTitle": "Portfolio",
      "imgSrc": "",
      "readme": "",
      "blog": "",
      "about": " React기반 포트폴리오 사이트",
      "introduce": "",
      "projectContent": {
        
     			// modal에 구현되는 데이터
      }
    },
    {
      "id": 1,
      "projectTitle": "",
      "imgSrc": "",
      "readme": "",
      "blog": "",
      "about": " 예약시스템",
      "introduce": "",
      "projectContent": {
        
        // modal에 구현되는 데이터
        
      }
    }
    
    ...
    
  ]

• 카드에 구현된 데이터이다. id를 key값으로 받아 순서대로 구현된다.
  그리고 modal에 들어가는 데이터는 배열형이 아닌 객체형으로 만들어 주었다.

2. 카드에 데이터 연결

function ToyProjectCard({ projectData }) {		//App js에서 받은 데이터
  const [introduce, setIntroduce] = useState(0); //데이터의 키값으로 연결하기 위해 state를 지정한다.
  const [toyPrjModal, setToyPrjModal] = useState(false);

  return (
    <>
      {projectData.map((prjCard) => {
        return (
          <div key={prjCard.id} >
            						...
        
                <img
                  onClick={() => {
                    setIntroduce(prjCard.id); // 데이터의 id값으로 연결 (더보기 button도 동일)
                    setToyPrjModal(true);
                  }}
                  src={prjCard.imgSrc} alt="toyprojectImg" />
                    
									...
               
          </div>
        );
      })}
      {toyPrjModal === true ? (
          <ToyPrjDetail
            project={projectData}
            setToyPrjModal={setToyPrjModal}
            introduce={introduce} // 데이터를 받을때 조건처리를 위해 키값을 지정한 state를 props로 함께 넘겨준다.
          /> ) : null}
    </>
  );
}
export default ToyProjectCard;

• props로 받은 데이터를 map()으로 연결한다. 데이터의 키값으로 카드와 모달의 데이터를 연결하기위해 state로 지정된 키값과 함께 onClick이벤트로 구현될 modal컴포넌트에 넘겨준다.

3. id를 조건문으로 사용하여 데이터를 연결

function ToyProjectDetail({ project, setToyPrjModal, introduce }) {
  return (
    
      <div>
        {project.map((projectList) => {
          if (projectList.id !== introduce) return null; //키값으로 데이터를 연결
          return (
            <div key={projectList.id}>
              
            // 데이터 넣기
            
            </div>
          );
        })}
      </div>
    </StyledToyPrj>
  );
}
export default ToyProjectDetail;

• 카드에 구현된 데이터의 id와 콘텐츠의 id가 같을 경우 map()으로 호출하여 반환한다.

4. 🚧 WARNING메세지

expects a value to be returned at the end of arrow function 메세지가 떴다.

경고메세지 당시의 코드

// ProjectDetail.js

{project.map((projectList) => {
          if (projectList.id === introduce) {
            return (
              <div key={projectList.id} className="listWrap">
                
              ...
            
              </div>
            );
          }
        })}

화살표 함수에 if문의 조건을 처리후 반환하는 과정에서 나온 경고메세지인것 같다.

위에 코드처럼 if (projectList.id !== introduce) return null;을 반환하고 return을 하니 메세지가 사라졌다. filter를 사용하는 방법도 해결방안중 하나로 제시되었지만 나의 경우 코드를 약간 수정하는걸로 마무리 하였다.

시현 영상

✏️ 마치며

같은 조건일때 반환되게 만드는 코드가 생각보다 많다. 여러경우가 있지만 많은 데이터를 호출하여 반환하는 경우 경고메세지라 할지라도 꼭 해결하고 지나가자!
두개의 프로젝트 카테고리중 하나는 id를 조건으로 한것이 아닌 인덱스로 받아서 카드별로 인덱스를 지정했는데, 이부분은 추후 꼭 리팩토링해줘야 겠다.