매우 허접하지만.... drf 에서 단순 post 가져오는 테이블이다.

posts_thired.jsx

import React, { Component } from "react";
import axios from "axios";
import { getPosts } from "../services/postService";

const apiEndpoint = "http://localhost:8000";

class Posts extends Component {
  state = {
    count: 0,
    next: "",
    previous: "",
    posts: []
  };

  async componentDidMount() {
    // const { data: posts } = await axios.get(apiEndpoint + "/posts");
    // this.setState({ posts });
    // console.log(this.state.posts.results);
    const { data: resp } = await getPosts();
    // console.log(resp);
    const count = resp.count;
    const posts = resp.results;
    const next = resp.next;
    const previous = resp.next;
    this.setState({ count, posts, next, previous });
  }

  handleAdd = async () => {
    const obj = { title: "a", body: "b" };
    const { data: post } = await axios.post(apiEndpoint + "/posts");
    const posts = [post, ...this.state.posts];
  };

  handleDelete = post => {};

  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>picture</th>
            <th>title</th>
            <th>category or tags</th>
            <th>posted_at</th>
            <th>author</th>
          </tr>
        </thead>
        <tbody>
          {this.state.posts.map(post => (
            <tr key={post.id}>
              <td>{post.title}</td>
              <td>{post.title}</td>
              <td>{post.clsf_title}</td>
              <td>{post.created_at}</td>
              <td>{post.user_name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Posts;