next+ts 8일차 json파일 _app.tsx

유튜브: https://www.youtube.com/watch?v=WYQsfte0DZs 
깃허브: https://github.com/qjawns0222/caremaker/tree/next+ts8%EC%9D%BC%EC%B0%A8 

_app.tsx에서 전체적으로 데이터를 넣어줄려고했느데  getServerSideProps는 _app파일에서 사용을 못하더라고요...

_app.tsx

import axios from "axios";

import { GetServerSideProps } from "next";

import { AppProps } from "next/app";

import React, { useEffect, useState } from "react";

import NavContainer from "../containers/navcontainer";

import num from "../data";

const App = ({ Component, pageProps }: AppProps) => {

  const [data, Setdata] = useState();

  useEffect(() => {

    try {

      axios

        .get(

          "https://raw.githubusercontent.com/qjawns0222/caremaker/next%2Bts-6%EC%9D%BC%EC%B0%A8/carddata.json"

        )

        .then((res) => {

          Setdata(res.data);

        });

    } catch (e) {

      console.log(e);

    }

  }, []);

  return (

    <>

      <NavContainer />

      <Component data={data} {...pageProps} />

      <style jsx global>

        {`

          * {

            text-decoration: none;

            margin: 0px;

            padding: 0px;

          }

          a {

            color: inherit;

            text-decoration: none;

          }

        `}

      </style>

    </>

  );

};

export default App;

이렇게 해서 데이터를 전달해줄려고 했는데.... 데이터를 전달하는데 늦게 전달이되서 html에 못담아요....

이런식으로 hook도 만들어봤지만 실패...

이런식으로 타입을 만들어 줬습니다.

import { NextPage } from "next";

import Login from "../components/login";

import { js } from "../type";

const loginContainer = ({ data }: { data: js }) => {

  const name = "권범준";

  return (

    <div>

      <Login name={name} data={data} />

    </div>

  );

};

export default loginContainer;

이런식으로 타입을 설정하고 사용하는데 주의할점이 내부에 또다른 만들어진 타입을 넣으면 오류가 나요.

이런식으로하면 컴포넌트에 데이터 넣어서 전송할때 오류가 떠요.

물론 안뜰수도있지만 저는 떠가지고 기존처럼 바껐습니다.

어제 못찾아서 네이버에 질문글 올렸는데 답글와서  오늘은 그걸해보도록 하고 내일 글쓰겠습니다.