React - 2/15
summary - 17.md -01
배포할 때 해야할 것
vite.config -> base 설정
react-router basename 가져오기 (routes => index.jsx)
-----
summary - 17.md -02
글로벌 내비게이션 바 스타일링 수정
내비게이션 활성 링크
react router -> className (공식 문서 보기)
routes => GlobalNavBar.jsx 12~31 줄
useLocation + tabindex 설정
스크롤바를 숨기지만 스크롤을 허용하는 css 설정 (main.css)
-----
summary - 17.md -03
Tailwindcss '!important' 설정 방법
특정 위치로 부드럽게 스크롤 후, 상위 요소에 초점 이동
scrollIntoView
------
summary - 17.md -04
Tailwind.config.js에서 safeList를 사용 (build 후 용량이 커짐)
대신, 필요한 것만 적기
------
summary - 17.md -05
내비게이션 상태를 활용해 페이지 로딩 표시
useNavigation
idle -> submitting ->
------
summary - 17.md -06
내비게이션 수정
페이지 이동 후, 초점 제거 (like 멀티 페이지 라우팅)
원했던 결과가 아니라 07.에서 코드 수정
---
summary - 17.md -07
vite 메뉴얼 청크(chunk) 나누기
react rouder 지연 로딩 구성
tailwind css 최적화
리액트 + 에코시스템
React Router v6의 새로운 개념
Loader
Loader는 특정 라우트에 접근하기 전에 필요한 데이터를 비동기적으로 불러오고, 이를 라우트 컴포넌트의 props로 전달하기 위해 사용됩니다. 예를 들어, 서버에서 사용자 정보나 게시글 목록을 가져올 때 사용할 수 있습니다.
Loader 함수는 params, request, 그리고 context를 인자로 받으며, 이를 통해 필요한 데이터를 조회하고 반환할 수 있습니다. 반환된 데이터는 라우트 컴포넌트에서 사용할 수 있게 됩니다.
이 기능은 페이지 렌더링 전에 필요한 데이터를 사전에 불러오는 용도로 사용되며, 이를 통해 사용자에게 더 나은 페이지 로딩 경험을 제공할 수 있습니다.
------------
Action
Action은 사용자가 폼 제출과 같은 작업을 수행했을 때 호출되는 함수로, 주로 데이터를 생성, 업데이트, 삭제하는 등의 작업을 수행하기 위해 사용됩니다. 예를 들어, 게시글을 작성하거나, 사용자 정보를 업데이트할 때 사용할 수 있습니다.
Action 함수 역시 params, request, 그리고 context를 인자로 받아 이를 통해 필요한 작업을 수행하고 결과를 반환합니다. 이를 통해 클라이언트 측에서 발생한 이벤트에 대해 서버 측에서 처리를 하고, 그 결과를 사용자에게 반영할 수 있습니다.
Action을 사용하면, 폼 제출과 같은 사용자 인터랙션에 대한 응답 로직을 라우트 단위로 관리할 수 있어 애플리케이션의 구조를 더 명확하게 할 수 있습니다.
----------------
NavLink
<NavLink> 컴포넌트는 React Router 라이브러리에 포함된 컴포넌트 중 하나로, 사용자가 현재 위치한 경로와 매칭되는 네비게이션 링크를 생성할 때 사용됩니다. <NavLink>는 <Link> 컴포넌트와 비슷하게 동작하지만, 현재 경로와 링크가 일치하는 경우에 스타일이나 클래스를 추가하여 사용자에게 시각적인 피드백을 제공하는 추가 기능이 있습니다.
---------
useReducer
useReducer는 React 훅 중 하나로, 주로 상태 관리가 복잡한 컴포넌트나 상태 로직을 다른 컴포넌트와 공유해야 할 때 사용됩니다. useState 훅의 대체 함수로 볼 수 있으며, 리듀서 패턴을 사용하여 상태 업데이트 로직을 더 명확하게 만들 수 있습니다.
리듀서(reducer)는 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환하는 순수 함수입니다. useReducer 훅은 이 리듀서 함수와 함께 초기 상태를 인자로 받아 현재 상태와 상태를 업데이트할 수 있는 dispatch 함수를 반환합니다.