소개

React 응용 프로그램에서 공공 데이터 집합을 표시하는 데 사용되는 일반적인 모델에 대해 이야기하고 싶습니다. 로컬 JSON 파일을 통해'로컬 API'를 프로젝트에 하드코딩하는 것입니다.
나의 GIF-FIT 프로그램에서 모든 연습은 로컬 JSON 파일로 되어 있으며, 나는 그것을 나의 Reducer에 가져오고, 사용자의 입력에 따라 무작위로 선택한 연습이다.나는 단독 아령 연습 서류가 하나 있다.
나의 투자조합 사이트에서 나도 두 가지 다른 것이 있다.json 파일, 하나는 나의 프로젝트, 하나는 나의 블로그에 사용됩니다.
본고는 API가 무엇인지, 그리고 프로젝트에서 어떻게 API를 시뮬레이션하여 사용하는지 연구하고자 한다.

API. - 얘는 뭐야?

API는 애플리케이션 프로그래밍 인터페이스의 약자입니다.나는 많은 기술 정의를 붙일 수 있지만, 차라리 내 말로 정리하고 싶다.
API를 정보 저장 및 공유 방식을 정의하는 방법으로 간주할 수 있습니다.트위터나 페이스북, 당신이 보낸 트위터나 당신이 읽은 모든 트위터, 인종차별주의 아저씨가 공유한 나쁜 페이스북 게시물 등 프로그램과 상호작용을 할 때 최종적으로 당신의 개요에 나타난다. 모두 그들의 API에서 데이터를 수신하고 그들에게 데이터를 보내는 과정이다.
API는 서로 다른 패턴을 따를 수 있다. 어떤 API는 사용자가 업데이트하거나 수정할 수 있다. (예를 들어 새로운 트윗을 보낼 때 트위터 데이터베이스에 항목을 추가하기만 하면 된다.) 어떤 API는 사용자가 변경하는 것이 아니라 사용자만 사용할 수 있다.

이것은 우리에게 무슨 도움이 됩니까?

API를 사용하면 유사한 데이터 세트를 쉽게 저장할 수 있습니다.모든 트위터 사용자는 같은 속성을 가지고 있다. 사용자 이름, 팔로워, 트위터, 좋아요 등이다.트윗 대상 보기:

!!!! 나한테도 무서워!
애플리케이션 규모가 증가함에 따라 복잡한 API가 얼마나 복잡해질지 상상할 수 있습니다.
좋아, 이제 우리는 이미 완전히 스트레스가 심해졌어. 심호흡을 하고 긴장을 풀자.
우리는 로컬 파일에서 API를 다시 만들고 이 데이터를 사용하여 응용 프로그램의 어느 곳에서든 호출할 수 있다.나를 믿어라, 너는 그렇게 복잡한 것을 창조할 필요가 없을 것이다. 적어도 너 자신은 필요로 하지 않을 것이다.만약 네가 이렇게 한다면, 너는 행렬을 제어할 수 있기 때문에, 이 글을 읽는 것을 멈춰야 할 수도 있다.

로컬 API 작성 방법

당신이 해야 할 첫 번째 일은 표시할 내용을 확인하는 것입니다.
나는 Codesandbox을 박았다. 나는 이 개발 문장을 위해 강력한 사람을 만들었다.
나는 모든 권세 있는 사람들을 위해 그들의 전명, 그들의 직업과 취미를 보여주는 이미지를 보여주고 싶다.다음으로, 나는 로컬 데이터를 위해 파일을 만들어야 한다.src 폴더에서 data이라는 폴더를 만들었습니다. 이 폴더에서 personData.json이라는 파일을 만들었습니다.

src
└───data
│   │   personData.json

JSON이란 무엇입니까?그것은 "JavaScript Object Notation"의 줄임말이다.

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

.json 파일을 만들 때, 우리는 매우 특수한 형식으로 그 중의 데이터를 구성할 수 있을 뿐이다. 하나의 대상 그룹이다.personData.json을 구성 요소로 가져올 때, 우리는 대상 그룹을 통해 각각의 대상을 표시합니다.우리는 내가 위에서 말한 표시할 속성으로 모든 대상을 정의할 것이다.
내'person-object'의 구조를 봐라.

[
  {
    "id": 1,
    "url": "",
    "name": "",
    "role": "",
    "hobbies": [

    ]
  }
]

몇 가지 참고:

은 모든 대상에 "id"속성이 있어야 합니다..json 파일이 여러 개 있을 때, 나는 하나의 단독'백'부터 각 그룹을 시작한다.하나는 "0"100(001002)부터, 다른 하나는 .json 파일은 2012, 2023,
잠깐만요.나는 이것이 매우 좋은 방법이라고 생각한다.

은 .json 파일을 빈 대상과 분리하여 새 항목을 빠르게 복사하고 그룹에 붙이는 것이 좋습니다.저는 structure.json이라고 합니다.

src
└───data
│   │   personData.json
│   │   structure.json

내 personData.json 파일을 보십시오. 그중에 몇 개의 항목이 기입되어 있습니다.괜찮지!모든 대상에는 유일한'id'가 있습니다. 필요한 내용만 작성하면 됩니다.우리가 화면에 정보를 표시할 때, 이것은 매우 많은 장점이 있다. 나는 잠시 후에 회담할 것이다.

[
  {
    "id": 1,
    "url": "https://cdn.vox-cdn.com/thumbor/w4zoPhL-LTUszPWHAUOeCmyS07w=/366x80:1263x685/1200x800/filters:focal(634x212:896x474)/cdn.vox-cdn.com/uploads/chorus_image/image/67233661/Ef4Do0cWkAEyy1i.0.jpeg",
    "name": "Bruce Wayne",
    "role": "Batman",
    "hobbies": [
      "spelunking",
      "stalking",
      "beating up bad guys"
    ]
  },
  {
    "id": 2,
    "url": "https://images2.minutemediacdn.com/image/fetch/w_736,h_485,c_fill,g_auto,f_auto/https%3A%2F%2Fwinteriscoming.net%2Ffiles%2F2018%2F11%2FGaladriel.jpg",
    "name": "Lady Galadriel",
    "role": "Ring Bearer",
    "hobbies": [
      "giving gifts",
      "star gazing",
      "slaying orcs"
    ]
  }
]

데이터는 당신이 원하거나 필요로 하는 모든 것입니다!다른 React 프로젝트의 예제 .json개를 보려면 다음과 같이 하십시오.
투자조합 사이트 블로그

[
    {
        "id": 201,
        "logo": "devto.png",
        "name": "React Hooks Series: useState",
        "image": "useState screenshot.jpg",
        "summary": "Part one in my React Hooks Series. I examine the useState hook in a basic timer app with examples from Codesandbox.",
        "url": "https://dev.to/jamesncox/react-hooks-series-usestate-12ne"
    },
    {
        "id": 202,
        "logo": "devto.png",
        "name": "React Hooks Series: useEffect",
        "image": "useEffect screenshot.jpg",
        "summary": "Part two in my React Hooks Series takes a look at the useEffect hook and how I implememnt in a small timer app I created in Codesandbox.",
        "url": "https://dev.to/jamesncox/react-hook-series-useeffect-in2"
    }
]

투자조합 사이트 프로젝트

[
    {
        "id": 1,
        "name": "GIF FIT",
        "image": "gif fit resized collage.jpg",
        "github": "https://github.com/jamesncox/gif-fit",
        "url": "https://gif-fit.netlify.app/",
        "summary": "Home workouts made easy!",
        "description": "Gif Fit builds randomized workouts for you that you can do without any equipment in your home. Select how many exercises you want to perform, how long each one lasts, the rest period in between and total number of rounds. Gif Fit will keep track of each move for you and let you know when to rest and prepare for the next exercise. Features a React front-end, Redux to manage state, and Material UI for styling. Gifs are sourced from Giphy.com (special thanks and credit to 8fit for uploading so many awesome exercises). Made with love to genuinely help others during these stressful and challenging times.",
        "technologies": [
            "React",
            "JavaScript",
            "Redux",
            "Material UI"
        ]
    },
    {
        "id": 2,
        "name": "DO DID DONE",
        "image": "do did done collage.jpg",
        "github": "https://github.com/jamesncox/do-did-done-react",
        "url": "https://do-did-done.netlify.app/",
        "summary": "Keep track of your todos by category",
        "description": "Do Did Done allows a user to create an account and select several categories to manage their tasks. Do Did Done is made with a React frontend and a Rails API backend. The React frontend features Material UI components, React router, Redux and local state management, functional components and React hooks and a thoughtful design for improved UI and UX. The frontend consumes the Rails API with full CRUD functionality. The Rails API backend is hosted on Heroku and features a PostgreSQL database. It handles sessions, cookies, CRUD functionality, separation of concerns and MVC structure.",
        "technologies": [
            "React",
            "Rails",
            "JavaScript",
            "Redux"
        ]
    }
]

네.대상 그룹을 만들고 모든 데이터를 코드에 하드코딩했습니다.하지만!어쨌든 HTML/JSX에서 각 항목에 대해 별도의 <div>을 만들어야 합니다.나를 믿어라. 이런 방식은 지금 더 많은 일을 필요로 하는 것 같지만, 그것은 너를 위해 많은 시간을 절약해 준다.

당신의 데이터를 사용할 때가 됐어요.

우리는 재미있는 부분에 왔다. 우리의 로컬 API를 사용하라!
이것은 매우 기본적이고 인위적인 예이기 때문에, 나는 나의 응용 프로그램을 하나의 구성 요소인 응용 프로그램에 보존한다.js.데이터를 가져오겠습니다.

import PersonData from './data/personData'

우리 console.log(PersonData)

[Object, Object, Object, Object, Object, Object, Object]
   0: Object
   id: 1
   url: "https://cdn.vox-cdn.com/thumbor/w4zoPhL-LTUszPWHAUOeCmyS07w=/366x80:1263x685/1200x800/filters:focal(634x21 
   2:896x474)/cdn.vox-cdn.com/uploads/chorus_image/image/67233661/Ef4Do0cWkAEyy1i.0.jpeg"
   name: "Bruce Wayne"
   role: "Batman"
   hobbies: Array[3]
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object

아름답다우리는 우리가 직접 만든 예쁜 JSON을 방문할 수 있다.경탄했어
화면에 이 대상들을 표시할 때가 되었다.
우리의 전체 응용 프로그램 구성 요소:

import React from "react";
import "./styles.css";
import "./responsive.css"
import PersonData from './data/personData'

export default function App() {
  return (
    <div className="App">
      <h1>Powerful People</h1>
      {PersonData.map(person => {
        return (
            <div className="card" key={person.id}>
              <div className="row">
                <div className="column">
                  <div>
                    <img src={person.url} alt={person.name} />
                  </div>
                </div>
                <div className="column">
                <div className="info">
                  <p>Full name</p>
                  <h4>{person.name}</h4>
                  <p>Profession</p>
                  <h4>{person.role}</h4>
                  <p>Hobbies</p>
                  <ul>
                    {person.hobbies.map((hobby, i) => { 
                      return(     
                        <li key={i}>{hobby}</li>
                      )
                    })}
                  </ul>
                </div>
              </div>
            </div>
            </div>
            )
        })}
    </div>
  )
}

{PersonData.map(person => {에서 각 객체의 속성: person.name, person.role에 액세스한 다음 각 객체를 다시 매핑합니다.

<ul>
  {person.hobbies.map((hobby, i) => { 
     return(     
        <li key={i}>{hobby}</li>
     )
   })}
</ul>

몇 가지 참고 사항:

목록의 모든 대상은 유일한 키가 있어야 합니다. 그렇지 않으면linter는 당신에게 화를 낼 것입니다.이것이 바로 우리가 JSON에서 모든 대상에게'id'속성을 주는 이유이다

<div className="card" key={person.id}>

화목하다

<li key={i}>{hobby}</li>

그 중에서 i은 모든 취미의 색인으로 유일한 키가 될 수 있다.

<div className="card">을 만들면 됩니다.만약 우리가 personData.json에서 온 로컬 데이터를 사용하지 않는다면, 화면에 표시하고자 하는 모든 사람을 위해 단독div를 만들어야 합니다.이게 얼마나 통제력을 잃게 될지 상상해 봐!만약 당신이 다른 사람을 만들고 싶다면, personData.json에서 다른 항목을 만들면 됩니다, 보세요!얘가 화면에 있어!

기본적으로

끝내다

나는 우리가 논쟁할 수 있는 의미가 국부적이라는 것을 깨달았다.json 파일은 실제로 API입니다. 왜냐하면 당신이 진정으로 그것과 통신하지 않기 때문입니다.하지만 난 상관없어!나는 이것이 자신의 API의 개념을 소개하고 JSON 구조를 응용 프로그램에 어떻게 활용하기 시작하는지 좋은 방법이라고 믿는다.
외부 API와 통신하는 방법을 배우는 것은 다른 날의 단독 문장이다.
그러나 자신의 JSON을 작성할 수 있을 뿐만 아니라 이를 통해 속성을 매핑하고 추출할 수 있다면, 외부 API와 통신을 시작할 때 화면에서 이 데이터를 쉽게 얻을 수 있습니다.
예전과 같이 제 댓글을 읽어 주셔서 감사합니다.나는 네가 시간을 내서 나의 생각과 의견에 참여한 것에 감사한다.나는 당신의 피드백을 환영합니다. 만약 당신이 기분이 있다면, 나의 천재를 칭찬해 주십시오.
그냥 농담이야...
다음까지 즐거운 코드!