빅데이터 부트캠프 85일차

Json 파일 불러오기

fetch

- async() => {const response = await fetct(); return response.json();} 형식으로 사용

- fetch는 프로미스 객체를 반환하기 때문에 .json()으로 타입 변환 필요

axios

- axios => npm install axios를 통해 설치 => import axios from "axios";

- async() => {const response = await fetct(); return response.data;} 형식으로 사용 

- axios는 json 객체를 반환하기 때문에 타입 변환 필요없이 바로 json파일 사용 가능

 

styled components

- styled components => npm install styled-components를 통해 설치 => App.js에서 import styled from "styled-components";

- [const 컴포넌트명 = styled.태그명 `]형식으로 입력하여 App.js에서 바로 해당 컴포넌트의 특정 태그의 CSS 설정 가능을 가능하게함 

ex) const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `; => Title 컴포넌트의 h1태그에 CSS 설정 반영

 

react-router-dom

- npm install react-router-dom을 통해 설치

- <Routes> = 여러 <Route>를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할

- <Router path=경로 element=컴포넌트>

- 라우팅(Routing) = 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

- 라우터(Router) = 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리

- <Link to=경로> = 해당 경로로 이동하는 <a>와 비슷한 기능이지만 해당 주소의 모든 부분을 입력해야 하는 <a>와 다르게 현재 페이지에서 다르게 추가될 것만 입력해주면 됨

ex) 기준 웹페이지 주소 = http://localhost:3000

      <a href="http://localhost:3000/about"></a> = <Link to="about"></Link>

URL 파라미터와 쿼리 스트링

- 쿼리 스트링을 이용할 때 =  useSearchParams, URL 파라미터를 이용할 때 = useParams

ex) 쿼리스트링 = http://localhost:3000/products?productId=1,

      URL 파라미터 = http://localhost:3000/products/1

ex) 쿼리스트링 => const [search, setSearch] = useSearchParams();                             

                  const productId = search.get("productId"); => 컴포넌트에서 path="/products/:productId" 형식

ex) URL 파라미터 => const {productId} = useParams(); => 컴포넌트에서 path="/products/*" 형식