TIL
[PB] 7주차 스터디 정리
팝삐
2024. 8. 6. 15:13
React로 웹사이트 만들기
React Router로 웹사이트 만들기
- 리액트에서는 모든 것을 컴포넌트로 만든다
- 웹페이지도 컴포넌트화해서 만드는 것
- React Router 라이브러리를 통해 쉽게 만들 수 있다.
- Single Page Application
- Client-side Rendering
- Server-side Rendering
리액트 라우터 v6 소개
- 리액트 라우터
- 리액트 컴포넌트로 페이지를 나누는 라이브러리
- Router
- 리액트 라우터에서 사용하는 데이터를 모두 가지고 있는 역할
- Context
- Props를 거치지 않고 데이터를 넘겨 준다
- 데이터를 넘겨주는 부위 → Context Provider
- Props를 거치지 않고 데이터를 넘겨 준다
- Routes
- Route
- Link
- 리액트 라우터에서 a 태그 대신 사용하는 것
Routes로 페이지 나누기
function Main() {
return (
<BrowserRouter>
<App>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="courses" element={<CourseListPage />} />
<Route
path="courses/react-frontend-development"
element={<CoursePage />}
/>
<Route path="wishlist" element={<WishlistPage />} />
</Routes>
</App>
</BrowserRouter>
);
}
export default Main;
- Routes 컴포넌트는 여러 개 Route를 포함한다.
- 위에서부터 차례대로 path와 일치하는 지 검사한다.
- 일치하는 path를 찾을 시 지정한 element를 실행한다.
- elemet는 jsx 함수를 지정한다!
Link로 이동하기
<Link to="/courses">카탈로그</Link>
- / 를 사용하는 이유 : 절대 경로임을 표시하기 위해서이다.
NavLink로 네비게이션 구현하기
- 네비게이션에서 사용하는 링크라는 뜻
- style 속성으로 스타일을 지정해줄 수 있다.
function getLinkStyle({ isActive }) {
return {
textDecoration: isActive ? 'underline' : '',
};
}
<NavLink style={getLinkStyle} to="/courses">
useParams로 동적인 경로 만들기
- path로 모든 변수를 지정할 수는 없기 때문에 알아서 변수를 지정해 path를 결정하는 것을 동적인 경로라고 말한다.
<Route path=":courseSlug" element={<CoursePage/>}
없는 페이지 처리하기
<Route path="*" element={<NotFoundPage />} />
Navigate로 리다이렉트하기
- 이유가 있어서 페이지를 리다이렉트해야하는 경우
- 로그인 되어있지 않은 경우 로그인 페이지로 리다이렉트하는 로직 설계 가능
if (!course) {
return <Navigate to="/courses" />;
}
- Navigate로 편하게 설계 가능
useSearchParams로 쿼리 사용하기
- 쿼리 스트링
- 주소에서 추가적인 조건을 넣을 때 사용할 수 있다.
{initKeyword && courses.length === 0 ? (
<Warn
className={styles.emptyList}
title="조건에 맞는 코스가 없어요."
description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
/>
) : (
<div className={styles.courseList}>
{courses.map((course) => (
<CourseItem key={course.id} course={course} />
))}
</div>
)}
react-helmet
<Helmet>
<title>Codethat - 코딩이 처음이라면, 코드댓</title>
</Helmet>
- head에 덮어쓰기 때문에 helmet 태그
- 컴포넌트마다 title을 덮어쓸 수 있다.
싱글 페이지 어플리케이션 이해하기
- 싱글 페이지 어플리케이션이란
- 하나의 HTML 문서
- 하지만 자바스크립트로 여러 페이지를 보여줄 수 있다.
- 클라이언트 사이드 렌더링
- 웹 브라우저에서 자바스크립트로 HTML 페이지를 만드는 것
- a 태그 대신 link를 사용한 이유
- request를 보내지 않고
- 화면을 렌더링할 수 있다.
- a 태그 대신 link를 사용한 이유
- 웹 브라우저에서 자바스크립트로 HTML 페이지를 만드는 것
- 서버 사이드 렌더링
- 서버에서 HTML을 만들고 리스폰스로 보내주는 것
- 훨씬 빨리 화면을 띄어줄 수 있고 SEO에서 좋은 점수를 받을 수 있다는 장점
- 서버에서 HTML을 만들고 리스폰스로 보내주는 것
- 정적 사이트 생성
- 미리 HTML을 만들어서 서버에서 배포하는 것
- 데이터가 거의 바뀌지 않는다면 매번 새로 만들 필요가 없기 때문에 유용하다.
렌더링을 활용한 리액트 기술 세 가지
- Next.js
- 서버 사이드 렌더링을 대신 구현해주는 기술
- 자바스크립트 파일을 나눠 곧바로 페이지로 사용할 수 있다는 장점
- Gatsby
- 리액트 코드를 미리 렌더링해서 프로젝트를 빌드할 때 HTML 파일로 만든다.
- 정적인 회사 소개 사이트 / 동아리 홈페이지 / 포트폴리오 사이트 같이 정적인 사이트를 만드는 경우 추천
- React Native
- 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 한다.