리액트 공부 내용 정리

💎 NavLink와 Link의 차이는?

- NavLink는 특정 링크에 스타일을 넣어줄 수 있다.

[React] Link와 NavLink

 

💎 React-Router-Dom createBrowserRouter

React Router v6.4 이상에서 Router 다루기(RouterProvider, createBrowserRouter, Route)

 

💎 React-Router-Dom Outlet 이란?

- 중첩 라우팅: 컴포넌트 children과 같은 느낌으로 라우터를 중첩해서 사용

- Outlet을 이용하면 상위 컴포넌트를 레이아웃화 할 수 있다.

 

App.js

//import 삭제
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "events", element: <EventsPage /> },
      { path: "events/:id", element: <EventDetailPage /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

 

Root.js

import { Outlet } from "react-router-dom";
import MainNavigation from "../components/MainNavigation";

function RootLayout() {
  return (
    <>
      <MainNavigation />
      <main>
        <Outlet /> {/* 자녀 라우트 콘텐츠를 렌더링할 곳을 정의 */}
      </main>
    </>
  );
}
export default RootLayout;

[React] outlet을 이용한 쉬운 레이아웃 교체

 

💎 Fetch vs Axios

Axios	Fetch
요청 객체에 url에 있다.	요청 객체에 url에 없다.
*써드파티 패키지로 설치가 쉽다. ( npm install axios )	Built-in APIs 로 별도의 설치 필요 없이,  모던 브라우저에서 사용 가합니다.
*XSRF를 보호 해준다.	별도 보호 없음.
data 속성을 사용한다.	body 속성을 사용한다.
data는 object를 포함한다.	body는 문자열화 되어있다.
status가 200, statusText가 'OK'이면 성공이다.	reponse 객체가 OK 속성을 포함하면 성공이다.
자동으로 JSON 데이터 형식으로 변환된다.	.json() 메소드를 사용하여 변환 해야한다.
Request 취소 와 Request Timeout 설정이 가능하다.	해당 기능 없음.
HTTP 요청을 가로챌 수 있다.	default로 제공하지 않음
폭 넓은 브라우저 지원	크롬 42+, firefox 39+, edge 14+, safari 10.1+ 에서만 지원

[vanillaJs] Fetch와 Axios를 비교해보자!

 

💎 React-Router-Dom Loader 

loader: 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행

[Router] loader와 useLoaderData

 

💎 리액트 API KEY 숨기기

React | 환경변수 사용하여 API key 숨기기(.env 이용)

 

[React] API키 숨기기(dotenv 활용하기)

 

💎 useEffect - clean up 함수?

useEffect(() => {
    return () => { }; //클린업
  }, []);

• 클린업 함수는 이펙트가 호출되기 전과 컴포넌트가 언마운트될 때 호출되면서 이전 이펙트로 인한 결과를 정리하는 역할을 한다.
  (* 단 컴포넌트가 마운트되면서 호출되는 이펙트는 이전 이펙트가 없으므로 이 때는 호출되지 않는다.)
• 확실한 마무리가 필요한 작업을 수행할 때 클린업을 활용한다.(ex. 소켓에서 연결 끊기 등)

찬미니즘