9월26일87일차 - params route 생성, fetch api 데이터 받아오기

data폴더에 받아온 data를 props에 담아 전달할 것입니다.
변수를 만들고 변수명으로 export 해줍니다.
const company = {
    name: "쇼핑몰",
    adress: "부산",
    tel: "00000000",
    fax: "11111111",
};
const profile = {
    slogan: "슬로건입니다.",
};
const content = [
    { con: "슬로건01", des: "내용01" },
    { con: "슬로건02", des: "내용02" },
    { con: "슬로건03", des: "내용03" },
];

export { company, profile, content };



변수를 import 하여 props로 전달합니다.
import React from "react";
import { company, profile, content } from "./data/data";
import Header from "./pages/Header";

const App = () => {
    return (
        <div>
            <Header data={company} />
        </div>
    );
};

export default App;





useParams를 이용하면 /list/ 주소 이후에 생성되는 route를 생성하게 됩니다.

원하지 않는  페이지의 경우에는 "존재하지 않는 페이지 입니다." 404에러 등등으로 이용자가 알 수 있도록 처리합니다.
파라미터는 여기서 path="/list/:num"의 :num에 해당됩니다. 아무 문자나 입력하여도 상관없습니다.

보기에 알기 쉬운 변수이름으로 정합니다.
            <Routes>
                <Route path="/list/:num" element={<Detail list={content} />} />
            </Routes>

import React from "react";
import { useParams } from "react-router-dom";

const Detail = ({ list }) => {
    const { num } = useParams();
    return <div>{num}</div>;
};

export default Detail;





Link로 /list/it.id 주소로 보냅니다.

/list/ 뒤에 아이템의 id가 들어오게 되어 /list/1 과 같은 형태의 주소로 보내집니다.
            <Header data={company} />
            {content.map((it) => {
                return (
                    <div key={it.id}>
                        <Link to={"/list/" + it.id}>{it.id}</Link>
                    </div>
                );
            })}

it.id와 route에서 생성한 num과 일치하는 데이터를 출력합니다.

useParams는 /list/1 의 1을 받아오게 됩니다.

num에 이를 저장하여 list.find(it) => it.id === Number(num) 으로

아이템의 id와 params가 일치하는 아이템의 데이터를 골라서 받아와 htm에 출력합니다.
import React from "react";
import { useParams } from "react-router-dom";

const Detail = ({ list }) => {
    const { num } = useParams();
    const match = list.find((it) => it.id === Number(num));

    return <div>{match.des}</div>;
};

export default Detail;

---

데이터를 가져옵니다. fetch를 이용해 res.json()으로 promise를 받아올 수 있습니다.
const App = () => {
    const [con, setCon] = useState();
    const [loading, setLoading] = useState(false);
    useEffect(() => {
        setLoading(false);
        fetch(process.env.PUBLIC_URL + "/data.json")
            .then((res) => res.json())
            .then((data) => {
                setCon(data);
                setLoading(true);
            });
    }, []);
    
이제 받아온 데이터를 렌더링합니다.
데이터를 불러오는 데에는 시간이 걸립니다.

화면이 렌더링 되는 속도보다 늦기 때문에 오류가 발생할 수 있습니다.

데이터를 시간을 벌어주는 역할을 삼항연산자를 이용하여 렌더링하도록 합니다..
            <ul>
                {loading ? (
                    con.map((el) => {
                        return (
                            <li key={el.id}>
                                <Link to={"/link/" + el.id}>
                                    <img
                                        src={process.env.PUBLIC_URL + el.img}
                                        alt=""
                                    />
                                </Link>
                            </li>
                        );
                    })
                ) : (
                    <div>없음</div>
                )}
            </ul>

axios를 이용해 데이터를 받아옵니다.
axios는 .json()함수로 데이터를 객체로 변경할 필요가 없습니다. 
res.data 속성에 접근하면 바로 데이터를 읽을 수 있습니다.
    useEffect(() => {
        setLoading(false);
        axios(url).then((res) => {
            setCon(res.data);
            setLoading(true);
        });
    }, []);




보통 async await를 이용합니다.
    useEffect(() => {
        setLoading(false);
        const getData = async () => {
            const res = await axios.get(url);
            setCon(res.data);
            setLoading(true);
        };
        getData();
    }, []);


여기서 API에 따라서 CORS 에러가 발생하는 경우가 있는데
프록시서버로 해결하거나 직접 서버를 만들어 CORS 조건을 충족시킵니다.

 

express로 서버만들기
https://m.blog.naver.com/objconsolelog/222080587338

 

서버부터 화면까지 구현 순서대로 기록한 블로그
https://blog.naver.com/PostView.naver?blogId=ks2414e&logNo=222138655647&parentCategoryNo=93&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView