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
  • 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를 보내지 않고
        • 화면을 렌더링할 수 있다.
  • 서버 사이드 렌더링
    • 서버에서 HTML을 만들고 리스폰스로 보내주는 것
      • 훨씬 빨리 화면을 띄어줄 수 있고 SEO에서 좋은 점수를 받을 수 있다는 장점
  • 정적 사이트 생성
    • 미리 HTML을 만들어서 서버에서 배포하는 것
    • 데이터가 거의 바뀌지 않는다면 매번 새로 만들 필요가 없기 때문에 유용하다.

렌더링을 활용한 리액트 기술 세 가지

  • Next.js
    • 서버 사이드 렌더링을 대신 구현해주는 기술
    • 자바스크립트 파일을 나눠 곧바로 페이지로 사용할 수 있다는 장점
  • Gatsby
    • 리액트 코드를 미리 렌더링해서 프로젝트를 빌드할 때 HTML 파일로 만든다.
    • 정적인 회사 소개 사이트 / 동아리 홈페이지 / 포트폴리오 사이트 같이 정적인 사이트를 만드는 경우 추천
  • React Native
    • 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 한다.