이 기사에서는 외부 JSON 파일을 사용하여 정보를 보유함으로써 여러 구성 요소 생성을 자동화합니다.

이것은 우리가 관심사를 명확하게 분리하기 때문에 프로젝트를 더 체계적으로 만들 것입니다.

JSON에 정보가 포함되어 있습니다.

구성 요소는 시각적 표현입니다.

전제 조건

: JavaScript로 함수를 작성하는 현대적인 방법입니다. React와 map, filter, reduce 메서드에서 모두 사용됩니다.

Map function : 다른 배열의 정보를 기반으로 새 배열을 만들 수 있는 JavaScript 메서드입니다. (1:58에서 2:54까지 시청)

의도한 결과

그림 1: 동일한 애완동물 촬영 앱이지만 뒤에서 더 체계적으로 구성되어 있습니다.

그림 2: 계층 다이어그램. 중간에 점선이 있는 요소는 구성 요소가 아니라 구성 요소를 포함하는 배열입니다.

지도 기능 분석

시작하기 전에 다음에 대해 조금 설명하겠습니다.

The map function .

Arrays of components .

지도 기능

그림 3: 내부에 화살표 함수가 있는 맵 함수와 기존 for 루프 간의 비교.

보시다시피 map 함수는 더 간결한 코드를 작성하기 위한 지름길일 뿐입니다. 적은 코드를 작성할수록 버그가 줄어듭니다.

구성 요소 배열

그림 4: ComponentArray의 내용.

보시다시피 JavaScript 배열은 문자 그대로 문자열, 숫자, 심지어 React 구성 요소까지 무엇이든 담을 수 있습니다.

시작하기

이 연습에서는 JSON 파일을 사용하여 구성 요소 목록을 만듭니다.

JSON file .

App component .

MyComponent

JSON 파일:

src/ 폴더 안에 json 파일을 만듭니다. 바람직하게는 폴더 이름 내부data/ .

참고: 배열 내부의 각 개체에는 id 라는 키가 필요합니다. React는 각 구성 요소를 추적하기 위해 이것이 필요합니다.

[
    {
      "id": 1,
      "title": "Puppy",
      "fileName": "dog.jpg"
    },
    {
      "id": 2,
      "title": "Whiskers",
      "fileName": "cat.jpg"
    },
    {
      "id": 3,
      "title": "Birdie",
      "fileName": "cat-food.jpg"
    }
]

앱 구성 요소:

import MyJSON from "./data/pets.json";
import MyComponent from "./components/MyComponent";

export default function App() {
  const ComponentArray = MyJSON.map((item) => (
    <MyComponent key={item.id} title={item.title} fileName={item.fileName} />
  ));

  return (
    <div className="App">
      <section className="grid">
        {ComponentArray}
      </section>
    </div>
  );
}

코드를 분석해 보겠습니다.

import MyJSON from "./data/pets.json" : JSON을 가져옵니다.

const ComponentArray 구성 요소 배열을 저장할 변수를 만듭니다.

MyJSON.map()는 map 함수를 사용하여 구성 요소 배열을 만듭니다. 여기서 Map function이 작용합니다.

<MyComponent>는 MyComponent의 복사본이며 맵 기능은 json이 필요로 하는 만큼의 구성 요소를 생성합니다.

JSX 내부에서 중괄호ComponentArray 안에 {}를 넣습니다.

내 구성요소:

export default function MyComponent({ title, fileName }) {
  const imageObject = require("../images/" + fileName);
  const imageURL = imageObject.default;

  return (
    <article>
      <h2>{title}</h2>
      <img src={imageURL} alt={title} />
    </article>
  );
}

유일한 변화

imageObject : 프로젝트 폴더의 위치를 ​​부모로부터 받은 소품과 결합하여 이미지를 가져오는 변수입니다.

require("../images/" + fileName): require는 프로젝트 폴더에서 파일을 여는 Node.js 명령입니다.

imageURL : 이미지 경로가 있는 특정 키를 할당하기 위해 또 다른 변수를 생성합니다. 이 경우imageObject.default .

마지막으로 JSX 내부에서 {imageURL} 소스 속성에 <img/>를 사용합니다.

결론:

축하합니다 이것으로 React의 첫날 기사를 마칩니다.

Cupcake 웹사이트의 제품 페이지를 리팩토링하고 제품 구성이 얼마나 쉬운지 확인하여 연습할 수 있습니다. (SDA 학생만 해당)

다음날 예정된 기사로 이동하거나 공부를 계속하기 전에 휴식을 취할 수 있습니다.

완성된 코드를 보고 싶다면 이 파일link을 열고 브랜치 생성 목록을 엽니다.

학점:

표지 사진: Photo by Curology on Unsplash