React에서 객체 배열을 통한 루프
- JSX에서 객체 배열을 통한 루프
-
.map()을 사용하여 React에서 객체 배열을 반복 -
forEach()를 사용하여 React에서 객체 배열을 반복합니다. -
for를 사용하여 React에서 객체 배열을 반복
React는 개발자에게 빠르고 강력한 웹 애플리케이션을 구축하는 데 필요한 모든 기능을 제공하기 때문에 널리 사용되는 프런트 엔드 프레임워크입니다.
JSX에서 객체 배열을 통한 루프
JSX는 React의 기본 템플릿 언어입니다. HTML과 매우 유사해 보이지만 실제로는 JavaScript 코드를 작성하는 편리한 방법일 뿐입니다.
이 때문에 React 개발자는 중괄호를 사용하여 JavaScript 표현식을 표시하는 한 JSX 내에서 일반적인 JavaScript 메서드를 사용할 수 있습니다.
.map()을 사용하여 React에서 객체 배열을 반복
프런트 엔드 개발자는 일반적으로 외부 소스에서 받은 데이터를 표시하기 위해 아름다운 사용자 인터페이스를 구축해야 합니다. 데이터는 다양한 방식으로 형식화될 수 있습니다.
그러나 게시물, 제품 목록 또는 유사한 항목의 데이터가 있는 경우 개체 배열로 형식이 지정될 가능성이 큽니다. 각 개체에는 항목에 대한 정보(제목, 기본 콘텐츠, 메타 태그, 머리 그림 등)가 포함됩니다.
React 개발자는 객체 배열을 쉽게 반복할 수 있습니다. 배열의 모든 항목을 검토하고 수정된 각 항목을 출력하는 .map() JavaScript 메서드를 사용해야 합니다.
예를 살펴보겠습니다.
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
return (
<div className="App">
<h1>Coding Blog</h1>
{postsArray.map((post) => {
return <Post post={post}></Post>;
})}
</div>
);
}
function Post(props) {
return (
<div>
<h1>{props.post.title}</h1>
<p>{props.post.content}</p>
</div>
);
}
여기에는 부모 <App> 구성 요소와 자식 <Post> 구성 요소의 두 가지 구성 요소가 있습니다. 상위 구성 요소에서 postsArray 변수를 정의하여 API에서 수신할 수 있는 외부 데이터를 시뮬레이트합니다.
우리 앱은 매우 간단합니다. 메인 <App> 구성 요소에 블로그 헤더가 있습니다. 또한 .map() 메서드를 사용하여 배열의 각 항목을 검토합니다.
앞서 언급했듯이 .map() 메서드를 사용하면 각 항목의 수정된 버전을 출력할 수 있습니다. 우리의 경우 각 항목은 게시물 데이터(제목 및 내용)를 포함하는 개체입니다.
우리는 각 개체를 가져와 <Post> 구성 요소에 대한 소품으로 전달합니다.
자식 컴포넌트의 props를 통해 받은 데이터에 접근하여 헤더와 단락으로 표시합니다.
CodeSandbox의 라이브 데모를 보면 .map() 메서드가 세 개의 <Post> 구성 요소를 반환하는 것을 볼 수 있습니다. 배열의 각 개체에 대한 하나의 구성 요소입니다.
.map() 함수의 구문을 살펴보는 것이 중요합니다. 배열을 포함하는 변수를 참조할 수 있도록 여는 중괄호와 닫는 중괄호를 작성하는 것으로 시작합니다.
그런 다음 배열에서 .map() 메서드를 호출하고 해당 인수(배열의 각 항목을 검토하는 콜백 함수)를 제공합니다. 마지막으로 JSX 또는 HTML 요소를 반환할 때 배열의 각 항목(객체)에 있는 데이터를 사용하여 반환된 각 요소의 내용을 채워야 합니다.
forEach()를 사용하여 React에서 객체 배열을 반복합니다.
forEach() 배열 메서드는 자세한 for 루프 작성에 대한 대안을 제공합니다. React에서도 사용할 수 있습니다.
forEach()는 HTML 요소를 반환할 수 없지만 HTML 요소를 생성하여 배열에 삽입할 수 있습니다. 그런 다음 JSX 내에서 해당 배열을 참조하여 생성한 요소를 표시할 수 있습니다.
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
const posts = []
postsArray.forEach(post => posts.push(<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>)
)
return (
<div className="App">
<h1>Coding Blog</h1>
{posts}
</div>
);
}
for를 사용하여 React에서 객체 배열을 반복
for 문은 JavaScript에서 개체 배열을 반복하는 기본 방법입니다. 그러나 JSX 내에서 요소를 렌더링하는 데 사용할 수는 없습니다. 이러한 이유로 JSX 외부에서 for 루프를 정의해야 합니다.
예를 들어 이전 예제와 동일한 게시물 배열이 있다고 가정해 보겠습니다.
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
const posts = []
for (let i = 0; i < postsArray.length; i++){
posts.push(<div>
<h1>{postsArray[i].title}</h1>
<p>{postsArray[i].content}</p>
</div>)
}
return (
<div className="App">
<h1>Coding Blog</h1>
{posts}
</div>
);
}
이 예제에서는 postArray 변수의 모든 항목을 반복하여 HTML 요소를 만듭니다. 새로 생성된 posts 배열에 HTML 요소를 푸시합니다.
JSX에서는 for 루프를 사용할 수 없습니다. 대신 postArray 상태 변수의 데이터를 사용하여 생성한 HTML 요소가 포함된 posts 변수를 참조합니다.
for...of 구문을 사용하여 React에서 객체 배열을 반복합니다.
개발자는 이전 예제의 for 루프를 배열을 통해 루핑하기 위한 새롭고 더 읽기 쉬운 구문으로 대체할 수 있습니다.
const posts = []
for (let post of postsArray){
posts.push(<div><h1>{post.title}</h1></div>)
}
이것은 더 읽기 쉬운 접근 방식입니다. 코드의 다른 모든 부분은 동일하게 유지될 수 있습니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn