beomy

이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다. 1. v-for와 배열 v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다. 기본 사용방법 {{ item.message }} new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } });위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다...

Lists JavaScript에서 map 메소드를 새로운 리스트를 생성하는 방법은 아래와 같습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); // 혹은 const doubled = numbers.map(function(number) { return number * 2; }); console.log(doubled); 이와 유사하게 React.JS에서 map 메소드를 이용하여 컴포넌트 리스트를 만들 수 있습니다. 1. 리스트 컴포넌트 랜더링 중괄호를 사용하면 JSX에 자바스크립트를 사용할 수 있습니다. ([React.JS] JSX 참고) const numbers = [1, 2, 3, 4, 5]; co..