[P3_S3] React로 웹사이트 만들기

보리·2024년 4월 15일
0

codeit-sprint

목록 보기
18/22

✨리액트 라우터

리액트 컴포넌트로 페이지를 나누는 라이브러리

npm install react-router-dom@6
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import HomePage from './pages/HomePage';

function Main() {
  return (
    <BrowserRouter>
      <App>
        <HomePage />
      </App>
    </BrowserRouter>
  );
}

export default Main;

📘라우터

리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요하다. → BrowserRouter

이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있다.


import { BrowserRouter } from 'react-router-dom';

function App() {
  return <BrowserRouter> ... </BrowserRouter>;
}

📘페이지 나누는 방법

Routes 컴포넌트 안에다가 Route 컴포넌트를 배치해서 각 페이지를 나눠줄 수 있다.

이때 Routes 안에서는 위에서부터 차례대로 Route를 검사한다.

현재 경로와 path prop이 일치하는 Route 를 찾는다.


<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="posts" element={<PostListPage />} />
  <Route path="posts/1" element={<PostPage />} />
</Routes>

📘링크

리액트 라우터에서는 <a> 태그 대신에 Link 컴포넌트를 사용한다.

to 라는 prop으로 이동할 경로를 정해주면 된다.

<Link to="/posts">블로그</Link>

📘하위 페이지 나누기

Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 된다.

이때 하위 페이지에서 최상위 경로에 해당하는 경로는 path prop이 아니라 index 라는 prop을 사용하면 된다.


<Routes>
  <Route path="/"><HomePage /></Route><Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path="1" element={<PostPage />}  />
  </Route>
</Routes>

이때 부모 Route 컴포넌트에 element 를 지정하고,

아래처럼 Outlet 이라는 컴포넌트를 활용하면 공통된 레이아웃을 지정해줄 수 있다.

PostLayout.js


import { Outlet } from 'react-router-dom';

function PostLayout() {
  return (
    <div>
      <h1>블로그</h1>
      <hr />
      <Outlet />
    </div>
  );
}

export default PostLayout;

📘동적인 경로 다루기

콜론 (:) 으로 시작하는 문자열을 사용하면 경로에 파라미터를 지정할 수 있다.

예시) 아래처럼 /posts/:postId 라는 경로는 /posts/123 이라던지

/posts/abc 라는 주소로 접속하면 123 이나 abc 라는 값을 postId 라는 파라미터로 받는다.


<Routes>
  <Route path="/"><HomePage /></Route><Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path=":postId" element={<PostPage />}  />
  </Route>
</Routes>

경로 파라미터를 사용하려면 useParams 라는 훅을 사용하면 된다.


function PostPage() {
  const { postId } = useParams();
  // ...
}

📘쿼리 사용하기

useSearchParams 라는 Custom hook으로 SearchParams 객체를 받아올 수 있다. 이 hook은 SearchParams 객체와 Setter 함수를 배열형으로 리턴한다.

이때 쿼리 값은 SearchParams 의 get 함수로 가져온다.


import { useSearchParams } from 'react-router-dom';

function PostListPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filterQuery = searchParams.get('filter');

  // ...
}

만약 쿼리 값을 변경하고 주소를 이동하고 싶다면 Setter 함수에 객체를 넘겨주면 된다.

이때 객체의 프로퍼티로 쿼리 값을 지정할 수 있다.

예시) ?filter=react 라는 쿼리로 이동하기

setSearchParams({
  filter: 'react',
});

📘페이지 이동하기

리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동한다.


function PostPage() {
  // ...

  const post = getPost(postId);

  // post가 없는 경우 /posts 페이지로 이동
  if (!post) {
    return <Navigate to="/posts" />;
  }

  // ...
}

📗useNavigate Hook

useNavigate 라는 hook으로 navigate 함수를 가져오면 이 함수를 통해 페이지를 이동할 수 있다.


const navigate = useNavigate();

const handleClick = () => {
  // ... 어떤 작업을 한 다음에 페이지를 이동
  navigate('/wishlist');
}

❓Link, Navigate, useNavigate는 언제 쓰는게 좋을까?

  • 사용자가 클릭해서 페이지를 이동하도록 할 때
  • 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등
  • 대부분의 경우 Link 만으로도 충분하다.
  • 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때

예시:

  • 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
  • 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

📍useNavigate

특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때

예시:

  • 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
  • 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
  • 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우

각 페이지에 들어갔을 때 페이지 제목이 바꾸려면?

react-helmet 이라는 라이브러리

import { Helmet } from 'react-helmet';
import Button from '../components/Button';
import Container from '../components/Container';
import Lined from '../components/Lined';
import styles from './HomePage.module.css';
import landingImg from '../assets/landing.svg';

function HomePage() {
  return (
    <>
      <Helmet>
        <title>Codethat - 코딩이 처음이라면, 코드댓</title>
      </Helmet>
      <div className={styles.bg} />
      <Container className={styles.container}>
        <div className={styles.texts}>
          <h1 className={styles.heading}>
            <Lined>코딩이 처음이라면,</Lined>
            <br />
            <strong>코드댓</strong>
          </h1>
          <p className={styles.description}>
            11만 명이 넘는 비전공자, 코딩 입문자가 코드댓 무제한 멤버십을
            선택했어요.
            <br />
            지금 함께 시작해보실래요?
          </p>
          <div>
            <Button>지금 시작하기</Button>
          </div>
        </div>
        <div className={styles.figure}>
          <img src={landingImg} alt="그래프, 모니터, 윈도우, 자물쇠, 키보드" />
        </div>
      </Container>
    </>
  );
}

export default HomePage;
  • Helmet 이라는 컴포넌트로 감싼 다음에, 안에다가 <title> 태그를 배치하면 이 컴포넌트가 렌더링 될 때 HTML의 <title> 태그를 덮어쓸 수 있다.

✨리액트를 렌더링하는 방식

SPA

하나의 HTML 문서 안에서 자바스크립트로 여러 페이지를 보여주는 사이트

📘클라이언트사이드 렌더링(Client-side Rendering)

  • 웹 브라우저에서 자바스크립트로 HTML을 만드는 것
  • 리액트로 할 수 있는 가장 기본적인 방식의 렌더링
  • 리액트로 작성한 코드는 자바스크립트로 변환이 가능하다.(트랜스파일링)

클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 것

📘서버사이드 렌더링(Server-side Rendering)

  • 서버에서 HTML을 만들고 리스폰스로 보내주는 것
  • 백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을
  • 서버에서 HTML을 만든다는 뜻

📘정적 사이트 생성(Static Site Generation)

  • 미리 HTML 파일을 만들어서 서버를 배포하는 것
  • 서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비다. 그래서 미리 HTML 파일로 만들고 이걸 서버로 배포하는 방법을 사용한다.(정적 사이트 생성)
    • 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 것.
    • '정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 것
    • 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미다.
    • 리액트 코드로 HTML 파일을 만든다는 뜻

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

📘Next.js

리액트 서버사이드 렌더링을 편하게

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=p4wxlvwuf-nextjs-example.png&name=p4wxlvwuf-nextjs-example.png

Next.js 기본 예제 프로젝트 모습

리액트에서는 서버사이드 렌더링을 하는 기능들을 제공하고 있지만, 아주 기본적인 방법만 제공한다. 때문에 매번 작성해야 하는 코드의 양도 많고 복잡하다. 그래서 개발자들은 서버사이드 렌더링을 대신 구현해주는 기술들을 만들기 시작했다.

리액트 라우터랑은 다르게 HTML 파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 사용할 수 있다는 장점이 있다.

📘Gatsby

리액트로 정적 사이트 만들기

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=bfuyqam0x-gatsby-example.png&name=bfuyqam0x-gatsby-example.png

gatsby-starter-blog 프로젝트의 모습

빌드라는 건 리액트로 작성된 소스코드들을 브라우저가 알아들을 수 있도록 만드는 것이다.

Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML 파일로 만든다.(정적 사이트 생성) Gatsby를 사용하면 리액트로 만든 사이트를 빌드해서 손쉽게 HTML 파일로 만들 수 있다.

📘React Native

모바일 앱의 화면도 리액트로

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=react-native-example.png&name=react-native-example.png

리액트 네이티브에서 텍스트와 버튼을 배치한 예시

React Native는 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해 준다. 리액트 코드로 개발하면 웹과 안드로이드와 iOS 앱에서 사용하는 공통적인 코드를 한 번에 개발할 수 있다는 장점이 있다.

profile
보리
정신차려 이 각박한 세상속에서
이전 포스트

[P3_S2] React로 데이터 다루기

다음 포스트

[P3_S4] Styled-Components

0개의 댓글