[TIL] typescript props Array 처리 과정(2)

props를 여러개 받으려고 하니 어제와 같은 상황(이전 글)과 같은 상황으로는 해결이 되지 않았다.

그리고 이러한 과정을 하는 이유는 태그별로 같은 prop을 받을 예정이다.

Cards의 경우는 Card(사용하고자 하는 데이터의 모음)의 배열이다. 이것을 기본적으로 받을 예정이며, Cards가 없다면 없다는 문구를 표시하고자 하였다. 태그로는 사용자가 찜하거나 참여를 하여 완료된 혹은 참여를 하고 있는 3종류의 옵션이 존재를 할 것이기 때문에 한 가지 함수를 여러가지로 이용하기 위해서 만드는 작업이다.

 

1. 문제점 Typescript의 경우는 타입을 정해서 사용을 해야 하는데, Cards는 Card 타입의 배열이다.

2. Props를 여러개 받을 때에는 어떻게 해야하는가

 

이럴 때 느끼는 거는 제대로 배우지 않고 독학으로 주먹구구식의 배움에서 해매는 과정이 있기 때문에 해결이 어려운 경우가 발생한 걸 느끼고 있다.

그리고 1번의 문제점을 이것 저것 시도를 하다보니

해결 1 : interface를 두 번 사용함으로서 해결이 되었다.

해결 2: 어제와 다르게 튜터(object)의 형태로 props를 설정하여 여러개를 받을 수 있다.

 

이와 같은 방법으로 하게 되니 RoutineCards의 형태는 배열로 들어오게 되었다. (이전 글) 방법으로 했을 때에는 배열로 파라미터를 전달했으나 object의 형태였는데, 원하는대로 들어와서 자연스럽게 고민이 해결이 되었다.