리액트를 다루는 기술-12 (라우팅)

라우팅

• 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것
• 리액트에서 라우트 시스템을 구축하는 방법
  • react-router
    • 가장많이 사용됨
    • 컴포넌트 기반
  • next.js
    • SSR(Server Side Rendering)
    • CRA 처럼 프로젝트 설정 외 다양한 기능을 제공함
    • node.js 로 별도의 서버를 구동 해야함

MPA(Multi Page Application)

• spa가 생기기 전의 방식
• 페이지가 변경될 떄 마다 서버에 새로운 html을 요청하고 받아 오던 방식
• 페이지 별 html이 따로 있었음

SPA (Single Page Application)

• 하나의 페이지로 이루어진 어플리케이션
• 컴퓨터 성능 향상, 브라우저 기능 향상, 모듈화 표준 등장으로 가능해짐

1. 특징

• 사용자 인터랙션이 많을 때 유리 함
• 렌더링을 브라우저가 담당함
• 하나의 html 만 가지고 있음
• 새로운 데이터가 필요한 부분만 API 를 호출하여 필요한 데이터만 불러와 이용할 수 있음
• 라우팅을 위한 별도 코드가 필요함 ( History API 사용)

2. MPA 보다 나은 점

• 페이지 렌더링을 브라우저가 담담하기 때문에 서버 자원을 덜 사용함
• 사용자 인터랙션을 다양하게 수행할 수 있음
  • 페이지 별로 따로 html 파일이 있다면 데이터를 서버에서 관리하고, DB에만 저장 해야함
  • html 파일마다 데이터를 가져오는 script 코드를 작성해야함
  • 인터랙션이 많을때는 불리함

URL 파라미터와 쿼리스트링

1. URL 파라미터

• 주소 경로에 유동적인 값을 넣는 형태
• useParams로 조회
• /page/:parameter 형식으로 사용
• 주로 ID나 특정 데이터를 조회 할 때 사용함

2. 쿼리스트링

• 주소 뒷부분에 ? 이후 key=value 형태로 작성 &로 구분함
  • /page?name=hyesun
• 키워드 검색, 페이지네이션 등에 이용
• useLocation로 조회
  • pathaname : 경로
  • search: querystring 값
  • state : 페이지 이동시 임의로 넣을 수 있는 상태 값
• useSearchParams로 조회하는 것이 간단함