React JSX 내부를 반복하는 방법은 무엇입니까?

React를 사용하여 구성 요소 내에서 JavaScript 코드를 빠르게 작성할 수 있습니다. 이를 통해 모든 개발자가 사물 목록 반복, 함수 생성 및 호출, 로컬 변수에 데이터 저장 등과 같은 일반적인 React 프로그래밍 기술을 쉽게 처리할 수 있습니다.

React 프레임워크에서 생성하고 대중화한 JavaScript 확장인 JSX(JavaScript Syntax Extension)를 사용하여 요소가 렌더링되는 방식을 정렬할 수 있습니다.

이전에 React를 다루었다면 JSX에 익숙하거나 적어도 알고 있을 가능성이 높습니다.

React 마크업은 JavaScript용 특수 구문 확장인 JSX를 사용하여 생성됩니다.

이는 React에서 HTML 코드 작성(UI 설명)을 더 간단하게 만들고 다재다능함으로 인해 시간이 지남에 따라 Vue.js와 같은 다른 잘 알려진 프레임워크에서 JSX를 채택했습니다.

약간의 템플릿 언어 유사성이 있을 수 있지만 JSX를 사용하여 JavaScript의 모든 기능을 사용할 수 있습니다.

JSX란 무엇입니까?

JavaScript XML은 JSX라고 합니다. React에서 기본적으로 HTML을 빌드할 수 있게 해주는 JavaScript 구문 확장일 뿐입니다.

JSX를 사용하여 React에서 템플릿을 생성하는 것은 간단하지만 단순한 템플릿 언어가 아닙니다. 대신 JavaScript의 모든 기능을 포함합니다.

기존 JavaScript로 번역하는 동안 최적화를 수행하여 해당 언어보다 빠르게 만듭니다.

React는 마크업과 로직을 다른 파일로 나누는 대신 컴포넌트를 사용합니다. 다음 기사에서는 구성 요소에 대한 보다 심층적인 정보를 살펴보겠습니다. 그때까지 React에서 중요한 주제 중 하나인 구성 요소 재렌더링에 대해 자세히 살펴보겠습니다.

예시:

import React from 'react';
import ReactDOM from 'react-dom';
const name = "Olivier";
const element = <h1> Welcome { name }, and thanks for choosing Bosc Tech Labs Private Limited.< /h1>;

ReactDOM.render(
    element,
    document.getElementById("root")
);</h1>

산출:

Olivier를 환영합니다. Bosc Tech Labs Private Limited를 선택해 주셔서 감사합니다.

해당 JSX는 브라우저에서 직접 사용할 수 없기 때문에 빌드 단계에서 React로 변환해야 합니다. React.createElement 함수 호출.

React.createElement:

반응 요소는 문서 개체 모델(DOM) 요소가 실제로 어떻게 나타나야 하는지를 나타냅니다.

React.js는 브라우저의 DOM이 아닌 가상 DOM을 사용하여 UI/UX를 구성하고 브라우저와 통신합니다.

React 요소는 가상 DOM을 구성합니다. HTML 요소와 비슷하지만 JavaScript 개체입니다.

간단히 말해서 React 요소는 브라우저 DOM을 생성하는 방법에 대한 지침입니다.

화면에 자료를 표시하기 위해 HTML 구성 요소는 JavaScript에 포함된 다음 아래 표시된 구문을 사용하여 반응 요소로 변환됩니다.

통사론:

React.createElement(type,{props},children);

루프를 만들고 배열에 JSX를 추가한 다음 일련의 요소를 반복하여 JSX 부분을 생성할 수 있습니다.

통사론:

const elements = [] 
const items = []
for (const [index, value] of elements.entries()) {
  items.pugsh(<element key="{index}">)
}</element>

React JSX 내부를 반복하는 두 가지 방법

1. For 루프 사용
2. 지도 기능 사용하기

1. For 루프 사용:

배열 스타일의 항목 목록이 있다고 가정합니다. for 루프를 사용하여 루프를 만들고 배열에 JSX 요소를 추가할 수 있습니다.

예시:

render() {
  const items= ['Html', 'C#', 'Css'];
  const elements= []
  for (const [index, value] of items.entries()) {
    elements.push(<li key="{index}">{value}</li>)
  }
  return (
    <div>
      { elements }
    </div>
  )
}
elements.push():

배열에 하나 이상의 값을 삽입하려면 arr을 사용하십시오. 푸시() 메서드.

배열의 길이는 추가된 새 요소의 수를 반영하기 위해 이 기술을 사용하여 조정됩니다.

2. 지도 기능 사용:

for-of 루프 대신 map 함수를 사용하면 JSX 구성 요소에서 직접 동일한 작업을 수행할 수 있습니다.

예시:

import React from ‘react’
const RenderList = props => {
  const Languages= ["French", "German", "English", "Spanish", "Mandarin"];
  return (
    <ul>
      {Languages.map(Languages => (
        <li>{Languages}</li>
      ))}
    </ul>
  );
};

결론:

구성 요소 루프는 데이터를 출력하고 변경하기 위해 React 프로그래밍에서 자주 사용됩니다. 이 가이드에서 볼 수 있듯이 HTML 구성 요소를 동적 데이터와 함께 그룹화할 수 있습니다.

DOM 쿼리가 없으면 일반적으로 JavaScript 앱에서 이를 수행하기 어렵습니다. 구성 요소 루프를 사용하여 깔끔하고 효과적이며 읽기 쉬운 방식으로 객체 세트를 생성합니다.

또한 효율적인 디버깅을 통해 신뢰할 수 있는 웹 개발을 위해 개발자 팀을 채택할 수 있습니다. 가장 좋은 방법은 Bosc Tech에 연락하여 엔터프라이즈급 반응형 웹 애플리케이션 개발을 위한 React 개발자를 고용하여 생산성을 높이는 것입니다.