예시 코드
React 18, TypeScript, 그리고 Styled Components를 사용해서 게시판의 글 상세 페이지를 구현하는 예제 코드를 작성해드릴게요. 이 예제에서는 게시글의 내용을 보여주고, 게시글 작성자에게는 수정 버튼을 제공하여 게시글 수정 페이지로 이동할 수 있도록 할 것입니다. 또한, 사용자들이 댓글을 달 수 있는 기능도 포함하겠습니다.
먼저, React와 TypeScript, Styled Components를 설치해야 합니다. 이 예제는 해당 라이브러리들이 이미 설치되어 있다고 가정합니다.
1. **PostDetailPage.tsx** - 글 상세 페이지 컴포넌트
2. **CommentsSection.tsx** - 댓글 섹션 컴포넌트
3. **styled.ts** - 스타일 컴포넌트 파일
### PostDetailPage.tsx
```tsx
import React, { useState, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { CommentsSection } from './CommentsSection';
import { Container, PostContainer, Button } from './styled';
interface Post {
id: number;
title: string;
content: string;
author: string;
}
export const PostDetailPage: React.FC = () => {
const { postId } = useParams<{ postId: string }>();
const [post, setPost] = useState<Post | null>(null);
const history = useHistory();
// 게시글 데이터 가져오기 (여기서는 가상의 데이터를 사용합니다)
useEffect(() => {
// API 호출을 통해 게시글 정보를 가져옵니다.
// 예시로 임시 데이터를 사용
setPost({
id: parseInt(postId),
title: '게시글 제목',
content: '게시글 내용...',
author: '작성자',
});
}, [postId]);
const isAuthor = post?.author === '현재 로그인한 사용자'; // 로그인한 사용자가 작성자인지 확인
return (
<Container>
{post ? (
<PostContainer>
<h1>{post.title}</h1>
<p>{post.content}</p>
{isAuthor && (
<Button onClick={() => history.push(`/edit/${post.id}`)}>
수정하기
</Button>
)}
<CommentsSection postId={post.id} />
</PostContainer>
) : (
<p>게시글을 불러오는 중...</p>
)}
</Container>
);
};
```
### CommentsSection.tsx
```tsx
import React, { useState, useEffect } from 'react';
import { Container, Comment } from './styled';
interface CommentProps {
postId: number;
}
interface CommentType {
id: number;
author: string;
text: string;
}
export const CommentsSection: React.FC<CommentProps> = ({ postId }) => {
const [comments, setComments] = useState<CommentType[]>([]);
useEffect(() => {
// API 호출을 통해 댓글 데이터를 가져옵니다.
// 예시로 임시 데이터를 사용
setComments([
{ id: 1, author: '댓글 작성자1', text: '댓글 내용1' },
{ id: 2, author: '댓글 작성자2', text: '댓글 내용2' },
]);
}, [postId]);
return (
<Container>
{comments.map((comment) => (
<Comment key={comment.id}>
<strong>{comment.author}</strong>
<p>{comment.text}</p>
</Comment>
))}
</Container>
);
};
```
### styled.ts
```tsx
import styled from 'styled-components';
export const Container = styled.div`
padding: 20px;
`;
export const PostContainer = styled.div`
margin-bottom: 20px;
`;
export const Button = styled.button`
margin-top: 10px;
`;
export const Comment = styled.div`
margin-top: 10px;
border: 1px solid #ccc;
padding: 10px;
`;
```
이 코드는 기본적인 구조를 제공합니다. 실제 프로젝트에서는 API 호출, 사용자 인증 등의 추가적인 기능을 구현해야 합니다.
커리큘럼
1. 프로젝트 초기 설정
- React 18 프로젝트 생성
- Create React App을 사용하여 TypeScript 템플릿으로 새 프로젝트 생성.
- 필요한 라이브러리 설치
- Styled Components 및 타입 정의 파일 설치.
- 라우팅을 위한 React Router 설치.
- 개발 환경 설정
- TypeScript 및 ESLint, Prettier 설정 조정.
2. 기본 구조 및 스타일링
- 폴더 구조 정의
- 컴포넌트, 페이지, 서비스, 유틸 등의 폴더 분리.
- 전역 스타일 설정
- Styled Components를 이용한 전역 스타일 설정.
- 레이아웃 컴포넌트 생성
- 헤더, 푸터, 사이드바 등 공통 레이아웃 컴포넌트 생성.
3. 핵심 기능 개발
- 라우팅 설정
- React Router를 사용한 페이지 라우팅 설정.
- 게시판 목록 페이지 구현
- 게시글 목록을 보여주는 페이지 구현.
- 게시글 작성 페이지 구현
- 게시글 작성 및 수정을 위한 폼 구현.
- 게시글 상세 페이지 구현
- 개별 게시글을 보여주는 상세 페이지 구현.
- 작성자에게는 수정 및 삭제 버튼 제공.
4. 추가 기능 개발
- 댓글 기능 구현
- 게시글에 댓글을 달고 보여주는 기능 구현.
- 사용자 인증 구현
- 로그인 및 회원가입 기능 구현 (옵션).
5. 백엔드 통신
- API 연동
- REST API 또는 GraphQL API와 통신하여 데이터 처리.
- 상태 관리
- 상태 관리 라이브러리(예: Redux, Recoil)를 통한 상태 관리.
6. 테스트 및 디버깅
- 단위 테스트
- Jest 및 React Testing Library를 이용한 컴포넌트 단위 테스트.
- 통합 테스트
- 전체 애플리케이션의 통합 테스트.
7. 최적화 및 배포
- 성능 최적화
- React의 최적화 기술(예: useMemo, useCallback) 적용.
- 배포 준비
- 빌드 프로세스 설정 및 최적화.
- 배포
- 클라우드 서비스(예: Netlify, Vercel)를 이용한 배포.
8. 후속 개선 작업
- 사용자 피드백 수집 및 반영
- 실 사용자 피드백을 바탕으로 개선 작업 수행.
- 지속적인 리팩토링 및 유지보수
- 코드 리팩토링 및 버그 수정.