직업훈련/새싹(SeSAC)

[새싹(SeSAC) 프론트엔드] day39 221208

뉼👩🏻‍💻 2022. 12. 9. 03:55
728x90
반응형
SMALL

 

Hook는

리액트 v16.8에 새로 도입된 기능으로 항수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌 

 

useState 

: 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해주는 hook 

 

* 일반 웹 사이트의 동작 과정 

 

문제점 

: 사용자가 원하는 모든 화면을 서버가 준비를 해준다면

서버에 많은 이용자가 몰린다면 서버가 힘들어짐

사용자입장에서는 서버가 힘들어지면 페이지 접속이 지연되는 경험을 겪을 수 있다 

 

➡️ 서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발 

: 서버 사이드 렌더링(Sever Side Rendering)

- ASP(Active Server Page), JSP(Java Server Page)

 

➡️ 웹 서버가 아닌 자바스크립트 코드로 웹 문서를 생성 

: 싱글 페이지 어플리케이션(Single Page Application) 

 

장점 단점
페이지 전환 속도가 빠름 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐
(유지보수가 조금 어려울 수 있음) 
주소가 변경되어도 서버에 추가로
웹 문서를 요청하는 작업이 필요없음 		 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는
페이지의 스크립트까지 불러옴 
➡️ useMemo, useCallback등의 처리가 필요함

 

 

- 라우팅

: 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

: 페이지 이동

 

- 리액트 라우팅 라이브러리 

리액트 라우터
(react-router)		 리치 라우터
(reach-routher)		 Next.js

 

리액트 라우터

- 사용자가 입력한 주소를 감지하는 역할을 함 

- 여러 환경에서 동작할 수 있도록 다양한 라우터 컴포넌트를 제공 

 

Home v6.4.4

I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away.

reactrouter.com

 

 

📍 리액트 라우터 설치

$ npm install react-router-dom

 

 

const router = createBrowserRouter([
 {
 	path : "/",
    element : <div> HOME </div>,
    errorElement : <div>Page Not Found</div>
 }
]);


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

 

 

 

index: true,
// path: "/", 라는 뜻과 같음 

 

📍Link 컴포넌트 

- 리액트에서 <a>태그를 직접 사용하면 안됨 

➡️ <a> 태그를 클릭하여 페이지 이동 시, 브라우저가 페이지를 새로 불러오기 때문 

 : Link 컴포넌트를 이용하여 페이지 이동 가능 

- 페이지를 새로 불러오는 것을 막고, History API를 통해 브라우저 주소의 경로만 변경하는 기능 

 <Link to="주소">링크이름 </Link>

 

 

📍useNavigate()

- 페이지 방문 기록을 쉽게 관리할 수 있는 hooks

- 내장 함수를 사용하여 뒤로 가기, 특정 페이지로 이동 하기 등이 가능 

const navigate = useNavigate();

//home경로로 이동
function goHome() {
    navigate('/home');
}

 

 

navigator를 그냥 button 함수에 넣으면 navigator로 바뀌기 전에 실행되서 제대로 페이지 전환이 되지 않음 

 

useEffect(() => {
    navigate(`/product/${productId}`);
}, [productId]);

 

 

📍useParams

:  url값을 이용하여 상품별 상세페이지로 들어가는 방법

import { useParams } from "react-router";

const ProductInfo = () => {
  const { productId } = useParams;
  console.log(useParams);
  console.log(productId);
  return (
    <div>
      {productId}
      제품 상세 페이지
    </div>
  );
};

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅(목)

728x90
반응형