[리액트] 블로그 기본 페이지 및 상세 페이지 컴포넌트 구현하기

소요 시간: 5분 조회수: 208

이번 글에서는 React와 react-router-dom을 사용하여 블로그의 기본 페이지와 상세 페이지를 구현하는 방법을 다루겠습니다. 이 과정에서 페이지 간의 라우팅을 설정하고, API 요청을 통해 데이터를 가져오는 방법을 배웁니다.


1. react-router-dom 설치

먼저, React 애플리케이션에서 라우팅을 관리하기 위해 react-router-dom을 설치합니다.

npm install react-router-dom


2. 기본 페이지 및 컴포넌트 생성

2.1. App.js 파일 수정

먼저, src/App.js 파일을 수정하여 라우팅을 설정합니다. 여기서는 BrowserRouter, Route, Switch 컴포넌트를 사용하여 각 경로에 따라 다른 컴포넌트를 렌더링하도록 합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import PostDetail from './components/PostDetail';

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/post/:id" component={PostDetail} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

2.2. Home.js 파일 생성

다음으로, src/components/Home.js 파일을 생성하여 블로그의 기본 페이지를 구현합니다. 이 컴포넌트는 API 요청을 통해 포스트 목록을 가져와서 화면에 렌더링합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Home = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        axios.get('/api/posts/')
            .then(res => {
                setPosts(res.data);
            })
            .catch(err => {
                console.error(err);
            });
    }, []);

    return (
        <div>
            <h1>Blog Posts</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>
                        <Link to={`/post/${post.id}`}>{post.title}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

2.3. PostDetail.js 파일 생성

마지막으로, src/components/PostDetail.js 파일을 생성하여 개별 포스트의 상세 내용을 보여주는 컴포넌트를 구현합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const PostDetail = ({ match }) => {
    const [post, setPost] = useState({});

    useEffect(() => {
        const { id } = match.params;
        axios.get(`/api/posts/${id}/`)
            .then(res => {
                setPost(res.data);
            })
            .catch(err => {
                console.error(err);
            });
    }, [match.params]);

    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </div>
    );
};

export default PostDetail;


결론

이 글에서는 React와 react-router-dom을 사용하여 블로그의 기본 페이지와 상세 페이지를 구현하는 방법을 살펴보았습니다. axios를 사용하여 API 요청을 보내고, useState와 useEffect를 통해 상태를 관리하며, Link와 Route를 사용하여 페이지 간의 네비게이션을 구현했습니다. 이 기본적인 구조를 바탕으로 더 다양한 기능을 추가하여 여러분만의 블로그를 만들어 보세요.

인기글

리액트 리스트