[Django REST Framework] 및 React에서 자세히 보기

17254 단어 django-rest-framework장고React

실행 환경



MacOS BigSur - 11.2.1
Python3 - 3.8.2
장고 - 3.1.7
djangorestframework - 3.12.2
npm - 6.14.4
react - 17.0.1
react-dom - 17.0.1
axios - 0.21.1

DRF(백엔드)



DRF와 React를 이용한 Web 어플리케이션의 작성중, 상세 표시의 방법이 잘 모르고 곤란했으므로 이번은 그 상세 표시를 정리해 갑니다.

마지막 기사 ⇨
htps : // 코 m / 카츄노 9 / ms / c72f91203d 9356c605
에서 API 연계 부분은 끝나므로 그 계속에서입니다.
덧붙여서, DRF측에서는 http://localhost:8000/api/v1/post 로 일람표시,
http://localhost:8000/api/v1/post/○ 에서 상세 표시를 할 수 있도록 URL을 설정하고 있습니다.

React(프런트 엔드)



이번에는 Trend.js에서 목록을 표시하고 PostDetail.js에서 각각의 세부 사항을 표시하는 처리를 구현했습니다.

목록 표시



Trend.js
import React, { Component } from 'react';
import axios from 'axios';
import PostCard from './PostCard';

class Trend extends Component {
    state = {
        posts: []
    };

    componentDidMount() {
        this.getPosts();
    }

    getPosts() {
        axios
            .get('http://localhost:8000/api/v1/post')
            .then(res => {
                this.setState({ posts: res.data });
            })
            .catch(err => {
                console.log(err);
            });
    }

    render() {
      return (
        <div>
          <MenuBar active={"/trend"}/>
            <h1>トレンドです</h1><hr />
              {this.state.posts.map(item => (
                  <PostCard title={item.title} owner={item.owner} created_at={item.created_at} detail_link={`post/${item.id}`}/>
              ))}
        </div>
    )
  }
};

export default Trend;

axios를 사용하여 지정한 URL에서 데이터를 받고 있습니다. 덧붙여서 표시에는 React-Bootstrap의 Card를 이용하고 있어 PostCard.js는 이하와 같이 되어 있습니다.

PostCard.js
import React from 'react';
import Card from 'react-bootstrap/Card';

const PostCard = (props) => {
  return (
    <Card style={{ width: '90%' }} border="success">
      <Card.Body>
        <Card.Title >{props.title}</Card.Title><hr />
        <Card.Text>
          {props.text}
        </Card.Text>
        <Card.Link href="#">{props.owner}</Card.Link>
        <Card.Link href={props.detail_link}>詳細</Card.Link><hr />
        <Card.Footer>
          <Card.Subtitle className="mb-2 text-muted">{props.created_at}</Card.Subtitle>
        </Card.Footer>
      </Card.Body>
    </Card>
  )
};

export default PostCard;

이것에 의해 이와 같이 기사 일람을 표시하고 있습니다.


상세보기



글쎄, 이번 주제는 이 목록에서 상세 페이지로 이동하고 싶다! 라고 말하는 것입니다.
다양한 기사를 조사한 결과, React Hooks의 useParams()를 이용해 URL로부터 파라미터를 취득하는 방법을 발견했습니다.

그 외에는 props로 컴퍼넌트간에 파라미터를 건네주는 방법도 있습니다만, useParams()를 사용하면 컴퍼넌트에 관계없이 어디서나 URL로부터 파라미터를 간단하게 취득할 수 있다고 합니다. 그러나 여기에서 React Hook을 이해하지 못했기 때문에 클래스 컴포넌트 내에서 useParams()를 사용하려고 해도 아무래도 에러가 나오고 원인을 모르게 막혔습니다.
그러므로 자신이 망설인 React Hooks에 대한 주의 사항을 조금만 정리해 둡니다.

React Hooks 주의사항


  • 함수 컴포넌트 내에서의 사양이 큰 전제
  • Hook은 함수의 최상위 레벨에서만 호출합니다 (루프 및 if 조건과 같은 내부에서 호출하지 않음).
  • 클래스 컴퍼넌트에서의 라이프 사이클 (componentDidMount () 등)은, Hook에서는 useEffect ()를 사용한다.

    그래서 상세 표시는 다음과 같은 함수 컴포넌트로 구현했습니다.

    PostDetail.js
    import React, { Component } from 'react';
import axios from 'axios';
import { useParams,Link } from 'react-router-dom';
import { useEffect,useState,toJson } from 'react';

const PostDetail = () => {
  const {id} = useParams();
  const [title, setTitle] = useState([])
  const [text, setText] = useState([])
  const [created_at, setCreatedAt] = useState([])
  const [owner, setOwner] = useState([])

  useEffect(async () => {
    const result = await axios(
          'http://localhost:8000/api/v1/post/'+id,
        );
    setTitle(result.data.title);
    setText(result.data.text);
    setCreatedAt(result.data.created_at);
    setOwner(result.data.owner);
  });

  return(
    <div>
      <h1>{title}</h1>
      <p>{created_at}</p><hr />
      <p>{text}</p>
      <Link to="/trend">Return</Link>
    </div>
  )
}

export default PostDetail;

    그건 그렇고,const [title, setTitle] = useState([])는 배열의 분할 대입을 하고 있어, useState()로title의 초기화를 실시해, setTitle()로title에 값을 대입할 수 있다고 하는 처리를 의미하고 있습니다. 자바스크립트에 익숙하지 않기 때문에 이 근처의 처리의 의미의 이해도 뭐 그렇게 시간이 걸렸습니다. . .

    이것으로 무사 상세 표시의 구현이 가능했습니다.
    React Hooks는 React16.8에서 추가된 새로운 기능으로, 보다 많은 React의 기능을 클래스를 사용하지 않고 사용할 수 있도록 하고 있다고 합니다.
    • [Django REST Framework]에서 React와의 API 연동
    【RestFramework】 관련 모델 일람을 출력한다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage