React에서 구성 요소 루프를 제정하는 방법 ⚛️

React의 도움으로 구성 요소 내에서 Javascript 코드를 작성할 수 있다는 것을 알고 계십니까? 또한 react가 자바스크립트 코드 작성을 허용할 때 react js 개발자를 위한 프로그래밍 접근이 간단해진다는 것을 알고 계실 것입니다. 객체 목록을 통한 루프, 함수 생성 및 실행, 로컬 변수에 데이터 저장 등의 기술을 여기에 기록했습니다. 이 자습서에서는 정적 데이터 목록 표시 및 API의 데이터 표시와 같은 기본 시나리오에서 루프를 사용하는 방법을 보여줍니다.

👉JSX의 출력 배열

이 구성 요소 루프가 무엇인지 아십니까? 구성 요소 루프는 일부 JSX와 추가로 결합되는 일반적인 JavaScript 루프입니다. DOM에서 직접 배열을 출력하는 기능은 JSX의 환상적인 기능입니다. 따라서 데이터 배열이 있는 경우 아래와 같이 DOM을 사용하여 해당 요소를 표시할 수 있습니다.

1  return(
2     <>
3     {data}
4      </>
5  )

결과적으로 HTML을 지원하는 데이터를 배열로 푸시하고 구성 요소의 return 문에서 중괄호를 사용하여 해당 배열을 출력할 수 있습니다. 그러나 다양한 JavaScript 루프를 사용하여 이를 수행할 수 있습니다. map()이 가장 인기 있고 간단하기 때문에 이 기사의 예제에서 광범위하게 사용됩니다.

👉정적 데이터 렌더링

다음 시나리오를 고려하십시오. DOM에서 항목 목록을 렌더링해야 합니다.



위에서 설명한 것처럼 각각<li>을 렌더링하는 것은 불편하고 시간이 많이 걸립니다. 가장 좋은 방법은 반복되는 코드 세그먼트를 분리하여 배열에 넣는 것입니다. 예를 들어 각 <li> 태그는 반복 세그먼트로 볼 수 있으므로 다음 데이터로 배열을 생성할 수 있습니다.

1 let items=['Item=1','Item=2','Item=3','Item=4'];

결국 이 배열의 출력은 다음과 같습니다.



또한 전체 HTML을 배열로 푸시하여 JSX를 정리할 수 있습니다.



그런 다음 해당 단일 배열을 렌더링해야 합니다.



다시 생각해 보면 아래와 같이 forEach() 메서드를 사용하여 동일한 작업을 수행할 수도 있습니다.



또한 일반 for 루프를 사용하여 위의 방법을 검토할 수 있으며 동일한 방식으로 작동합니다. 실제로 구성 요소의 크기가 커지면 UI에서 분리된 코드가 더 깨끗하고 호환 가능하며 읽기 쉬워집니다. 따라서 디버그하기가 쉽습니다.

👉동적 데이터 렌더링

실제 시나리오에서는 일반적으로 백엔드에서 데이터를 가져와서 구성 요소의 상태에 저장한 다음 이를 반복하여 페이지에 표시합니다. react js 개발 회사의 전문가들도 같은 작업을 수행합니다. 다음 시나리오를 고려하십시오. 웹 앱에 대한 사용자 목록을 가져오려고 합니다.
useState를 가져와 객체 배열을 보관할 간단한 상태 변수를 만듭니다.



또한 루트 디렉토리에서 다음 명령을 실행하여 Axios를 설치하여 API 호출을 할 수 있습니다.

1 npm install axios`

프런트 엔드에서 요청한 후 페이지는 데이터와 함께 완전히 로드되어야 합니다. 구성 요소가 DOM에 처음 탑재될 때 데이터를 채워야 합니다. 또한 두 번째 매개변수로 빈 값을 보내면 수명 주기 후크 useEffect()의 도움으로 이를 수행할 수 있습니다.



다음으로 서버의 날짜 조건을 채웁니다.



expert react js developers은 map()을 사용하여 데이터를 순환하고 페이지에 표시할 수 있습니다.



마침내 전문가들은 템플릿에서 논리를 분리할 수 있습니다.

요약하면

따라서 출력에 구성 요소 루프를 사용하고 데이터를 조작하는 것이 React의 표준 개발 방법입니다. 이 가이드에 설명된 대로 HTML 구성 요소를 동적 데이터와 함께 그룹화할 수 있습니다. 그러나 DOM 쿼리가 없는 순수한 JavaScript 앱에서 달성하기는 어렵습니다. 따라서 구성 요소 루프는 개체 집합을 깨끗하고 효율적이며 읽기 쉬운 방식으로 출력하는 데 사용됩니다.