0113 TIL ALL-CON devLog

막히는 점

• reducer에 객체가 담긴 배열 allConcerts를 담는데 생각처럼 되지 않았다.

setAllConcerts: (state: main, { payload }: PayloadAction<???>) => {
      state.allConcerts = payload;
    },

타입부분에 <Array>라고 적으면 Generic type 'Array<T>' requires 1 type argument(s)라는 2314번 에러가 나온다. any든 뭐든 인자를 하나 적어주어야 한다는 것같다.

타입부분에 <Array<any>>또는 <Array<object> 라고 쓰면
'Type 'object[]'is not assignable to type'[]'이라고 2322번 에러가 나온다.

뭔가 이상하다 싶어서 보니 interface main으로 state type을 설정해줄 때 [] (any도 안적힌 그냥 array)라고 작성했어서 interface부분과 reducer부분의 type이 안맞아서 일어난 에러였다.

• 랜딩페이지와 메인페이지에서 같은 jumbotron 컴포넌트를 공유하고 있었다. 메인페이지의 캐러샐Carousel에서 axios를 이용해서 포스터를 불러왔었다.
  npm run start를 하면 제일 먼저 랜딩페이지가 렌더링되는데, landingpage에서 axios를 쓸 일이 없는데 mainpage(여기서 처음 요청을 보낸다)도 안갔는데 jumbotron에서 axios 요청을 보내서 에러가 났다. 결국 랜딩페이지의 포스터들을 예쁜 더미 포스터들로 사용하기로 했다.

새로 알게된 점

• typescript에서 props 전달하기 방법 1

/* object props 받기*/
type concertProps = { concert: object }

function ConcertBox(concert: concertProps ) {
  return (
   ....(중략)...

/* 함수 props 받기 */
type MyProps = {
handleEdit: () => void;
}

function MyProfileImageModal({ handleEdit}: MyProps) {

• typescript에서 props 전달하기 방법 2

/* object props 받기*/
interface Props {
  concert: object
}

function ConcertBox({concert} : Props ) {
  return (
   ....(중략)...

props를 전달해주는 부모 컴포넌트 쪽은 보내는 과정이 똑같다. 다만 받는쪽(자식 컴포넌트)에서 타입을 설정해주어야 한다.

참고

타입스크립트 타입 선언