575.리액트 프로젝트 생성하기

1. Node.js 설치

리액트 프로젝트를 생성하고 실행하려면 Node.js가 필요합니다. Node.js는 JavaScript 런타임으로, 프로젝트 생성 도구와 빌드 도구들이 이를 이용합니다.

• Node.js 최신 버전 또는 최신 LTS(Long Term Support) 버전을 Node.js 공식 웹사이트에서 다운로드하여 설치하세요.

2. Create React App 또는 Vite 사용

리액트 프로젝트를 쉽게 생성할 수 있는 두 가지 주요 도구는 Create React App과 Vite입니다. 각 도구의 특징은 다음과 같습니다:

• Create React App: 리액트 앱을 빠르게 설정하고 실행할 수 있는 도구입니다. 자동으로 설정을 관리하고, 개발 서버를 제공하여 코드 변경 사항을 자동으로 반영합니다.
• Vite: 빠른 개발 환경을 제공하는 최신 빌드 도구입니다. Create React App보다 더 빠른 빌드 속도와 모듈 핫 리로딩을 제공합니다.

3. 프로젝트 생성

Create React App을 이용한 프로젝트 생성

1. 터미널을 열고 다음 명령어를 실행하세요:

npx create-react-app my-app

1. my-app을 원하는 프로젝트 이름으로 바꾸세요.

2. 프로젝트 디렉토리로 이동하고, 개발 서버를 시작하세요:

cd my-app
npm start

Vite을 이용한 프로젝트 생성

1. 터미널을 열고 다음 명령어를 실행하세요:

npm init vite@latest my-app --template react

npm create vite

• TypeScript: React 프로젝트에 타입스크립트(TypeScript)를 사용합니다. 타입스크립트는 자바스크립트에 타입을 추가하여 더 안정적인 코드를 작성할 수 있게 해줍니다.
• TypeScript + SWC: 타입스크립트와 함께 SWC(Speedy Web Compiler)를 사용합니다. SWC는 빠른 컴파일 속도를 제공하는 자바스크립트/타입스크립트 컴파일러입니다.
• JavaScript: 기본 자바스크립트를 사용합니다. 자바스크립트는 웹 개발에서 가장 널리 사용되는 스크립트 언어입니다.
• JavaScript + SWC: 자바스크립트에 SWC 컴파일러를 사용합니다.
• Remix ↗: Remix는 React 기반의 웹 프레임워크로, 더 나은 사용자 경험과 개발자 경험을 제공하기 위해 설계되었습니다.

1. my-app을 원하는 프로젝트 이름으로 바꾸세요.

2. 프로젝트 디렉토리로 이동하고, 필요한 패키지를 설치하세요:

cd my-app
npm install

개발 서버를 시작하세요:

npm run dev

. 프로젝트 파일 열기

선호하는 코드 편집기(예: Visual Studio Code)로 프로젝트 디렉토리를 엽니다. Visual Studio Code를 사용하는 경우, 터미널에서 다음 명령어로 바로 열 수 있습니다:

code .

. 기본 프로젝트 구조 이해

프로젝트가 생성되면 기본적인 폴더와 파일 구조가 설정됩니다. 주요 디렉토리와 파일은 다음과 같습니다:

• src/: 소스 코드 디렉토리
  • index.js 또는 main.jsx: 리액트 앱의 진입점
  • App.js 또는 App.jsx: 주요 컴포넌트 파일
• public/: 정적 파일 디렉토리
  • index.html: HTML 템플릿 파일
  •  

6. 패키지 설치

프로젝트를 생성한 후에는 필요한 서드파티 패키지를 설치해야 합니다. 예를 들어, 리액트 라우터를 설치하려면 다음 명령어를 실행하세요:

npm install react-router-dom

7. 프로젝트 실행

프로젝트 디렉토리에서 개발 서버를 시작하여 앱을 실행하세요:

• Create React App:

npm start

Vite:

npm run dev

8. 브라우저에서 앱 보기

터미널에 표시된 로컬 서버 주소를 브라우저에서 열어 리액트 앱을 확인하세요. 일반적으로 http://localhost:3000 또는 http://localhost:5173이 됩니다.

예제 프로젝트 스냅샷

강의에서 제공된 스냅샷을 사용하여 동일한 환경에서 작업할 수 있습니다. 해당 스냅샷을 다운로드하고 프로젝트 디렉토리에 복사한 후,

패키지를 설치하고 개발 서버를 시작하면 됩니다.

npm install
npm run dev

이제 기본 리액트 프로젝트가 준비되었습니다. 이 프로젝트를 통해 리액트의 기본 개념과 기능을 배울 수 있습니다.

앞으로의 학습을 위해 이 프로젝트를 기반으로 작업을 진행하세요.

1.main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import NewPost, { action as newPostAction } from "./routes/NewPost";
import RootLayout from "./routes/RootLayout";
import Posts, { loader as postsLoader } from "./routes/Posts";
import PostDetails,{loader as postDetailsLoader , action as postDeleteAction}  from "./routes/PostDetails";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        path: "/",
        element: <Posts />,
        loader: postsLoader,
        children: [
          {
            path: "create-post",
            element: <NewPost />,
            action: newPostAction, // action을 직접 전달
          },
          {
            path: "/:postId",
            element: <PostDetails />, 
            loader: postDetailsLoader    ,
            action:postDeleteAction       
          },
        ],
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

이 React 코드에서는 react-router-dom을 사용하여 블로그와 같은 애플리케이션을 위한 클라이언트 사이드 라우팅 시스템을 설정합니다. 주요 부분을 하나씩 설명하겠습니다.

임포트

• React와 ReactDOM: React 애플리케이션을 빌드하고 DOM에 렌더링하기 위한 핵심 라이브러리입니다.
• CSS: 애플리케이션의 스타일을 정의한 파일입니다.
• RouterProvider와 createBrowserRouter: react-router-dom에서 가져온 함수로, 라우팅을 구성하고 제공하는 역할을 합니다.
• 컴포넌트와 액션/로더: 여러 컴포넌트와 그에 대응하는 액션/로더를 임포트합니다.
  • NewPost와 newPostAction: 새로운 게시물을 생성하기 위한 컴포넌트와 액션입니다.
  • RootLayout: 메인 레이아웃 컴포넌트입니다.
  • Posts와 postsLoader: 게시물 목록을 표시하기 위한 컴포넌트와 로더입니다.
  • PostDetails와 postDetailsLoader: 특정 게시물의 세부 정보를 표시하기 위한 컴포넌트와 로더입니다.

라우터 구성

라우터 구성은 createBrowserRouter를 사용하여 정의합니다.

1. 루트 경로 (/):

   • element: RootLayout 컴포넌트를 렌더링합니다.
   • children: 루트 경로 아래에 중첩된 라우트입니다.

2. 게시물 경로 (/):

   • element: Posts 컴포넌트를 렌더링합니다.
   • loader: 게시물 목록을 렌더링하는 데 필요한 데이터를 불러오는 postsLoader입니다.
   • children: 게시물 경로 아래에 중첩된 라우트입니다.
     • 새 게시물 생성 경로 (create-post):
       • element: NewPost 컴포넌트를 렌더링합니다.
       • action: 폼 제출을 처리하는 newPostAction입니다.
     • 게시물 세부 정보 경로 (/:postId):
       • element: PostDetails 컴포넌트를 렌더링합니다.
       • loader: postId를 기반으로 특정 게시물의 데이터를 불러오는 postDetailsLoader입니다.

렌더링

ReactDOM.createRoot 메서드는 RouterProvider 컴포넌트를 렌더링하여 React 애플리케이션을 초기화하고, 구성된 router를 prop으로 전달합니다. 이는 애플리케이션에 라우터 컨텍스트를 설정합니다.

요약

• RootLayout: 메인 레이아웃 역할을 합니다.
• Posts: 게시물 목록을 표시하며, postsLoader를 통해 데이터를 불러옵니다.
• NewPost: 새로운 게시물을 생성합니다.
• PostDetails: 특정 게시물의 세부 정보를 표시하며, postDetailsLoader를 통해 데이터를 불러옵니다.
• 라우팅 구조: 루트 경로 (/)는 게시물 (/), 새 게시물 (/create-post), 게시물 세부 정보 (/:postId)를 포함합니다.

이 설정은 애플리케이션에서 게시물을 관리하기 위한 구조화되고 확장 가능한 라우팅 시스템을 보장합니다.

2.RootLayout.tsx

import { Outlet } from "react-router-dom";
import MainHeader from "../components/MainHeader";

const RootLayout = () => {
  return (
    <>
      <MainHeader />
      <main>
        <Outlet />
      </main>
    </>
  );
};

export default RootLayout;

RootLayout 컴포넌트

• MainHeader 컴포넌트: 애플리케이션의 헤더 역할을 합니다. 헤더에는 주로 네비게이션 링크나 로고 등이 포함됩니다.
• <main> 요소: 애플리케이션의 주요 콘텐츠 영역입니다.
• Outlet 컴포넌트: react-router-dom에서 제공하는 컴포넌트로, 중첩된 라우트를 렌더링하는 역할을 합니다. 라우팅 설정에서 지정한 자식 컴포넌트가 이 위치에 렌더링됩니다.

설명

1. MainHeader 컴포넌트

   • MainHeader 컴포넌트를 가져와서 <MainHeader />로 렌더링합니다. 이 컴포넌트는 애플리케이션의 모든 페이지에서 공통적으로 표시될 헤더를 정의합니다.

2. Outlet 컴포넌트

   • Outlet은 react-router-dom에서 제공하는 컴포넌트로, 부모 라우트 컴포넌트 내에서 자식 라우트 컴포넌트가 렌더링될 위치를 지정합니다.
   • RootLayout 컴포넌트가 루트 레이아웃으로 설정되면, 그 하위에 정의된 모든 자식 라우트는 <Outlet /> 위치에 렌더링됩니다.

3. JSX 구조

   • <MainHeader />는 항상 화면 상단에 표시되는 헤더 컴포넌트입니다.
   • <main> 태그 내에 <Outlet />이 위치하여 중첩된 라우트 컴포넌트가 렌더링될 공간을 만듭니다.

요약

RootLayout 컴포넌트는 애플리케이션의 기본 레이아웃을 정의합니다. 이 레이아웃은 다음과 같은 구조로 구성됩니다:

• 항상 표시되는 헤더(MainHeader).
• 중첩된 라우트를 렌더링하기 위한 <main> 태그 내의 <Outlet>.

이 설정을 통해 애플리케이션의 페이지 간에 일관된 레이아웃을 유지하면서, 각 페이지의 고유한 콘텐츠를 적절한 위치에 렌더링할 수 있습니다.

3.MainHeader.tsx

MainHeader 컴포넌트

• 아이콘: react-icons/md 라이브러리에서 MdPostAdd와 MdMessage 아이콘을 가져와 사용합니다.
• CSS 모듈: MainHeader.module.css 파일에서 정의된 스타일을 classes 객체로 가져옵니다.
• 링크: react-router-dom의 Link 컴포넌트를 사용하여 페이지 간 네비게이션을 처리합니다.

import { MdPostAdd, MdMessage } from 'react-icons/md';
import classes from './MainHeader.module.css';
import React from 'react';
import { Link } from 'react-router-dom';

const  MainHeader:React.FC=()=> {

  return (
    <header className={classes.header}>
      <h1 className={classes.logo}>
        <MdMessage />
        <Link to="/" className='white'>리액트 포스트</Link>
      </h1>
      <p>
        <Link  to="/create-post" className={classes.button}>
          <MdPostAdd size={18} />
          포스트하기
        </Link>
      </p>
    </header>
  );
}

export default MainHeader;

1. 아이콘 사용

   • MdMessage 아이콘은 로고 옆에 표시됩니다.
   • MdPostAdd 아이콘은 "포스트하기" 버튼 옆에 표시됩니다.

2. 헤더 구조

   • <header> 태그는 전체 헤더를 감쌉니다.
   • <h1> 태그는 로고를 포함하며, MdMessage 아이콘과 "리액트 포스트" 텍스트가 포함된 Link를 렌더링합니다.
   • <p> 태그는 "포스트하기" 버튼을 포함하며, MdPostAdd 아이콘과 "포스트하기" 텍스트가 포함된 Link를 렌더링합니다.

3. CSS 모듈

   • MainHeader.module.css 파일에서 정의된 스타일을 적용하여 헤더와 버튼의 스타일을 지정합니다.
   • classes.header, classes.logo, classes.button은 각각 헤더, 로고, 버튼에 적용되는 클래스입니다.

요약

MainHeader 컴포넌트는 애플리케이션의 헤더 역할을 합니다. 주요 기능은 다음과 같습니다:

• 로고: MdMessage 아이콘과 "리액트 포스트" 텍스트로 구성된 링크. 메인 페이지로 이동합니다.
• 포스트하기 버튼: MdPostAdd 아이콘과 "포스트하기" 텍스트로 구성된 링크. 새로운 게시물을 작성하는 페이지로 이동합니다.

이 컴포넌트를 통해 애플리케이션의 헤더 부분을 일관되게 유지하면서, 사용자에게 메인 페이지와 포스트 작성 페이지로 쉽게 접근할 수 있는 네비게이션 기능을 제공합니다.

4.PostsList.tsx

import React from "react";
import Post from "./Post";
import classes from "./PostsList.module.css";

import { useLoaderData } from "react-router-dom";

export interface PostData {
  id:string;
  author: string;
  body: string;
}

const PostsList: React.FC = () => {
  // useLoaderData의 반환 타입을 PostData[]로 지정
  const posts = useLoaderData() as PostData[];

  return (
    <>
      {posts.length > 0 && (
        <ul className={classes.posts}>
          {posts.map((post, index) => (
            <Post key={index} id={post.id}   author={post.author} body={post.body} />
          ))}
        </ul>
      )}
      {posts.length === 0 && (
        <div style={{ textAlign: "center", color: "white" }}>
          <h2>게시글이 없습니다.</h2>
          <p>포스트를 작성해 주세요!</p>
        </div>
      )}
    </>
  );
};

export default PostsList;

PostsList 컴포넌트

• PostData 인터페이스: 게시물 데이터의 타입을 정의합니다.
• CSS 모듈: PostsList.module.css 파일에서 정의된 스타일을 classes 객체로 가져옵니다.
• useLoaderData 훅: react-router-dom에서 제공하는 훅으로, 로더가 반환한 데이터를 가져옵니다.

설명

1. PostData 인터페이스

   • 게시물 데이터의 구조를 정의합니다. 각 게시물은 id, author, body 속성을 가집니다.

2. useLoaderData 훅

   • useLoaderData를 사용하여 로더에서 반환된 데이터를 가져옵니다.
   • 반환된 데이터를 PostData[] 타입으로 지정합니다.

3. 렌더링

   • 게시물이 있을 때 (posts.length > 0):
     • 게시물 목록을 <ul> 요소로 감싸서 렌더링합니다.
     • 각 게시물은 Post 컴포넌트를 사용하여 렌더링됩니다. key 속성으로는 게시물의 id를 사용해야 하지만, 여기서는 배열의 인덱스를 사용하고 있습니다. 이는 잠재적인 성능 문제를 일으킬 수 있으므로 실제로는 post.id를 사용하는 것이 좋습니다.
   • 게시물이 없을 때 (posts.length === 0):
     • 중앙 정렬된 메시지를 표시합니다. "게시글이 없습니다."와 "포스트를 작성해 주세요!"라는 메시지를 표시합니다.

4. CSS 모듈

   • PostsList.module.css 파일에서 정의된 스타일을 적용하여 게시물 목록의 스타일을 지정합니다.

요약

PostsList 컴포넌트는 게시물 목록을 렌더링합니다. 주요 기능은 다음과 같습니다:

• useLoaderData 훅을 사용하여 게시물 데이터를 로드합니다.
• 게시물이 있을 경우, 각 게시물을 Post 컴포넌트로 렌더링하여 목록을 표시합니다.
• 게시물이 없을 경우, "게시글이 없습니다."라는 메시지를 표시합니다.

이 컴포넌트를 통해 애플리케이션에서 게시물 목록을 일관되게 표시하고, 게시물이 없을 때 사용자에게 알림을 제공할 수 있습니다.

5.NewPost.tsx

import React from "react";
import classes from "./NewPost.module.css";
import Modal from "./../components/Modal";
import { Form, Link, redirect, ActionFunction } from "react-router-dom";
import { API_BASE_URL } from "../api-config";

const NewPost: React.FC = () => {
  return (
    <Modal>
      <Form method="post" className={classes.form}>
        <p>
          <label htmlFor="body">내용</label>
          <textarea id="body" required rows={3} name="body" />
        </p>

        <p>
          <label htmlFor="name">작성자</label>
          <input type="text" id="name" required name="author" />
        </p>
        <p className={classes.actions}>
          <Link to=".." className="button">
            취소
          </Link>
          <button type="submit">전송</button>
        </p>
      </Form>
    </Modal>
  );
};

export default NewPost;

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const postData = Object.fromEntries(formData) as { [key: string]: string };

  await fetch(API_BASE_URL + "/posts", {
    method: "POST",
    body: JSON.stringify(postData),
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
  });


  return redirect("/");
};

NewPost 컴포넌트

NewPost 컴포넌트는 사용자가 새로운 게시물을 작성할 수 있는 모달 폼을 렌더링합니다.

• CSS 모듈: NewPost.module.css 파일에서 정의된 스타일을 classes 객체로 가져옵니다.
• Modal 컴포넌트: 폼을 모달 형태로 렌더링합니다.
• Form 컴포넌트: react-router-dom의 Form 컴포넌트를 사용하여 폼을 생성합니다. 이 폼은 post 메서드로 제출됩니다.
  • 내용 입력 필드: <textarea> 요소로 구성되며, id가 "body"이고 name 속성이 "body"입니다. 필수 입력 필드로 설정되어 있습니다.
  • 작성자 입력 필드: <input type="text"> 요소로 구성되며, id가 "name"이고 name 속성이 "author"입니다. 필수 입력 필드로 설정되어 있습니다.
  • 액션 버튼: 취소 버튼은 <Link> 요소로 구성되어 폼을 제출하지 않고 이전 페이지로 이동합니다. 제출 버튼은 폼을 제출합니다.

action 함수

action 함수는 폼 제출 시 실행되며, API에 새로운 게시물을 생성하는 요청을 보냅니다.

• 폼 데이터 수집: request.formData()를 사용하여 폼 데이터를 가져옵니다. 그런 다음 Object.fromEntries를 사용하여 폼 데이터를 객체로 변환합니다.
• 게시물 데이터 전송: fetch 함수를 사용하여 API 엔드포인트 (API_BASE_URL + "/posts")에 POST 요청을 보냅니다. 요청 본문은 폼 데이터로 구성되며, Content-Type 헤더를 application/json; charset=utf-8로 설정합니다.
• 리다이렉트: 폼 제출 후, 사용자를 루트 경로 ("/")로 리다이렉트합니다.
•  

요약

이 코드는 새로운 게시물을 작성할 수 있는 모달 폼을 제공하고, 폼이 제출될 때 API로 게시물 데이터를 전송한 후 루트 페이지로 리다이렉트합니다. 주요 기능은 다음과 같습니다:

1. NewPost 컴포넌트:

   • 모달 내에 폼을 렌더링합니다.
   • 폼에는 내용과 작성자를 입력할 수 있는 필드가 있습니다.
   • 취소 및 제출 버튼이 포함되어 있습니다.

2. action 함수:

   • 폼 데이터를 수집하여 객체로 변환합니다.
   • API에 POST 요청을 보내 게시물을 생성합니다.
   • 요청이 완료되면 루트 페이지로 리다이렉트합니다.

6.Posts.tsx

import React from "react";
import "../App.css";
import PostsList from "../components/PostsList";
import { Outlet, LoaderFunction } from "react-router-dom";
import { API_BASE_URL } from "../api-config";

const Posts: React.FC = () => {
  return (
    <>     
      <Outlet />
      <main>
        <PostsList />      
      </main>
    </>
  );
};

export default Posts;

export const loader: LoaderFunction = async () => {
  const response = await fetch(`${API_BASE_URL}/posts`);
  if (!response.ok) {
    throw new Error('Failed to fetch posts');
  }
  const resData = await response.json();
  return resData.posts;
};

Posts 컴포넌트

Posts 컴포넌트는 게시물 목록을 렌더링하고, 중첩된 라우트를 처리합니다.

• Outlet: react-router-dom의 Outlet 컴포넌트를 사용하여 중첩된 라우트를 렌더링할 위치를 지정합니다.
• PostsList: PostsList 컴포넌트를 사용하여 게시물 목록을 렌더링합니다.

loader 함수

loader 함수는 게시물 데이터를 비동기적으로 로드합니다.

• API 요청: fetch 함수를 사용하여 API에서 게시물 데이터를 가져옵니다.
• 에러 처리: 요청이 실패할 경우 에러를 발생시킵니다.
• 데이터 반환: JSON 응답에서 게시물 데이터를 추출하여 반환합니다.

설명

1. Posts 컴포넌트

   • <Outlet />: react-router-dom의 Outlet 컴포넌트를 사용하여 중첩된 라우트를 렌더링합니다. 이 위치에 중첩된 라우트 컴포넌트가 렌더링됩니다.
   • <PostsList />: 게시물 목록을 렌더링합니다.

2. loader 함수

   • API 요청: fetch를 사용하여 ${API_BASE_URL}/posts 엔드포인트에서 게시물 데이터를 가져옵니다.
   • 에러 처리: 응답이 성공적이지 않으면 에러를 발생시킵니다.
   • 데이터 반환: JSON 응답에서 게시물 데이터를 추출하여 반환합니다.

요약

Posts 컴포넌트는 게시물 목록을 렌더링하고, Outlet을 사용하여 중첩된 라우트를 처리합니다. loader 함수는 API로부터 게시물 데이터를 비동기적으로 로드하여 반환합니다. 이 설정을 통해 사용자는 애플리케이션 내에서 게시물 목록을 쉽게 조회하고, 새로운 게시물을 작성하는 페이지로 네비게이션할 수 있습니다.

7.Post.tsx

import React from "react";
import classes from "./Post.module.css";
import { Link } from "react-router-dom";
import { PostData } from "./PostsList";

const Post: React.FC<PostData> = ({ id, author, body }) => {
  return (
    <Link to={id} className={classes.post}>
      <li>
        <p className={classes.author}>{author}</p>
        <p className={classes.text}>{body}</p>
      </li>
    </Link>
  );
};

export default Post;

Post 컴포넌트

Post 컴포넌트는 게시물의 정보를 표시하고, 클릭하면 해당 게시물의 상세 페이지로 이동할 수 있는 링크를 제공합니다.

• CSS 모듈: Post.module.css 파일에서 정의된 스타일을 classes 객체로 가져옵니다.
• Link: react-router-dom의 Link 컴포넌트를 사용하여 게시물의 상세 페이지로 이동할 수 있는 링크를 생성합니다.
• PostData 인터페이스: PostsList에서 가져온 PostData 인터페이스를 사용하여 props의 타입을 정의합니다.

설명

1. CSS 모듈

   • Post.module.css 파일에서 정의된 스타일을 classes 객체로 가져와서 적용합니다.
   • classes.post는 게시물 전체를 감싸는 링크의 스타일입니다.
   • classes.author와 classes.text는 각각 작성자와 본문 텍스트의 스타일입니다.

2. Link 컴포넌트

   • Link 컴포넌트를 사용하여 게시물을 클릭하면 해당 게시물의 id를 URL 경로로 사용하여 상세 페이지로 이동합니다.
   • to={id}는 링크의 목적지 URL을 게시물의 id로 설정합니다.

3. 게시물 정보 표시

   • <li> 요소 내에 작성자와 본문 텍스트를 각각 <p> 요소로 감싸서 표시합니다.
   • classes.author와 classes.text 스타일을 적용하여 작성자와 본문 텍스트의 스타일을 지정합니다.

요약

Post 컴포넌트는 단일 게시물을 렌더링하며, 게시물의 작성자와 본문을 표시하고, 게시물을 클릭하면 해당 게시물의 상세 페이지로 이동할 수 있는 링크를 제공합니다. 이 컴포넌트는 PostData 인터페이스를 사용하여 props의 타입을 정의하며, react-router-dom의 Link 컴포넌트를 사용하여 링크를 생성합니다. 이를 통해 사용자는 게시물 목록에서 개별 게시물을 클릭하여 상세 정보를 확인할 수 있습니다.

8.Modal.tsx

Modal 컴포넌트

Modal 컴포넌트는 모달을 표시하고, 모달 외부 영역을 클릭하면 모달을 닫습니다.

• CSS 모듈: Modal.module.css 파일에서 정의된 스타일을 classes 객체로 가져옵니다.
• useNavigate: react-router-dom의 useNavigate 훅을 사용하여 페이지를 탐색합니다.
• closeHandler 함수: 모달을 닫고 이전 페이지로 돌아가는 함수입니다.

import React from "react";
import classes from "./Modal.module.css";
import { useNavigate } from "react-router-dom";

interface ModalComponent {
  children?: React.ReactNode;
}

const Modal: React.FC<ModalComponent> = (props) => {
  const navigate = useNavigate();

  function closeHandler() {
    navigate("..");
  }

  return (
    <>
      <div className={classes.backdrop} onClick={closeHandler} />
      <dialog className={classes.modal}>{props.children}</dialog>
    </>
  );
};

export default Modal;

설명

1. CSS 모듈

   • Modal.module.css 파일에서 정의된 스타일을 classes 객체로 가져와서 적용합니다.
   • classes.backdrop은 모달의 배경을 어둡게 만드는 스타일입니다.
   • classes.modal은 모달 창의 스타일입니다.

2. useNavigate 훅

   • useNavigate 훅을 사용하여 페이지를 탐색합니다. 이 훅은 함수형 컴포넌트 내에서 사용할 수 있습니다.

3. closeHandler 함수

   • 모달 외부 영역을 클릭하면 호출됩니다.
   • navigate("..")를 사용하여 현재 경로의 부모 경로로 이동합니다.

4. 렌더링

   • 모달 외부 영역: <div> 요소로, classes.backdrop 스타일을 적용하고 클릭 이벤트를 처리합니다.
   • 모달 창: <dialog> 요소로, classes.modal 스타일을 적용하고 자식 요소(props.children)를 렌더링합니다.

요약

Modal 컴포넌트는 다음과 같은 기능을 제공합니다:

• 모달 렌더링: 모달 창과 배경을 렌더링합니다.
• 클릭 이벤트 처리: 모달 외부 영역을 클릭하면 모달이 닫히고 이전 페이지로 이동합니다.
• children: 모달 창 내부에 자식 요소를 렌더링합니다.

9.PostDetails.tsx

import { useLoaderData, Link, LoaderFunction, ActionFunction, redirect, Form } from 'react-router-dom';
import Modal from '../components/Modal';
import classes from './PostDetails.module.css';
import { PostData } from '../components/PostsList';
import { API_BASE_URL } from '../api-config';

function PostDetails() {
  const post = useLoaderData() as PostData;



  if (!post) {
    return (
      <Modal>
        <main className={classes.details}>
          <h1>Could not find post</h1>
          <p>Unfortunately, the requested post could not be found.</p>
          <p>
            <Link to=".." className={classes.btn}>
              Okay
            </Link>
          </p>
        </main>
      </Modal>
    );
  }

  return (
    <Modal>
      <main className={classes.details}>
        <p className={classes.author}>{post.author}</p>
        <p className={classes.text}>{post.body}</p>   
        <Form method="post">
          <button type="submit" className='button' name="intent" value="delete">삭제</button>
        </Form>     
      </main>
    </Modal>
  );
}

export default PostDetails;

export const loader: LoaderFunction = async ({ params }) => {
  const { postId } = params;
  if (!postId) {
    throw new Error("Post ID is required");
  }

  const response = await fetch(`${API_BASE_URL}/posts/${postId}`);
  if (!response.ok) {
    throw new Error("Failed to fetch post");
  }
  
  const postData = await response.json();
  return postData.post;
};


export const action: ActionFunction = async ({ params, request }) => {
  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "delete") { 
    const { postId } = params;

    if (!postId) {
      throw new Error("Post ID is required");
    }

    const response = await fetch(`${API_BASE_URL}/posts/${postId}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
    });

    if (!response.ok) {
      throw new Error("Failed to delete post");
    }

    return redirect("/");
  }

  return null;
};

소스 :

https://github.com/braverokmc79/react-crash-course-typescript/tree/react-router-dom