본문 바로가기

Map3

[React] 리스트 데이터 동적 출력 //data.jsexport const CORE_CONCEPTS = [ { image: componentsImg, title: 'Components', description: 'The core UI building block - compose the user interface by combining multiple components.', }, { ... }, ...import { CORE_CONCEPTS } from "./data.js"; 데이터를 출력하기 위해 4개의 CoreConcept 컴포넌트가 사용되고 있다.만약 4개의 데이터 중 한 개가 사라지면 해당 영역에 빈 내용을 보여줄 것이다.불필요한 반복 코드를 줄여야 한다.데이터 소스가 변경되면 컴포.. 2024. 7. 10.
[JS] 배열과 배열 메소드 배열도 객체 중 하나이다.배열을 값의 목록을 생성하는 것으로 []를 사용한다.const hobbies = ["sports","cooking","reading"];console.log(hobbies[0]);객체는 키-값 쌍으로 값 그룹을 묶지만, 배열을 값만을 순서대로 저장하며 목록의 위치에 따라 값을 액세스할 수 있다.배열을 저장하는 변수 또는 상수 이름 뒤에 [] 대괄호를 사용해 배열의 값에 접근한다.[] 대괄호에 출력하고자 하는 원소의 인덱스를 넣으면 된다.인덱스는 0부터 시작한다.배열은 모든 유형의 값을 저장할 수 있다. 객체, 숫자, 문자열 등  배열에 저장된 값을 변환하거나 읽는데 사용할 수 있는 다양한 내장 메소드가 존재한다.  push() 원소를 추가할 수 있다. const hobbies =.. 2024. 7. 5.
[React] map() map()자바스크립트 배열의 내장 함수(메소드)이다.배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환한다.let arr = [3, 4, 5, 6];let modArr = arr.map(function(element){ return element *3;});console.log(modArr); // [9, 12, 15, 18]  arr.map(function(element, index, array){  }, this);요소(element)뿐만 아니라 인덱스(index), 전체 배열 객체(array)를 전달하고, this는 콜백함수 내부에서 사용하게 된다.  리액트 map() 예시const ItemList = () => { const data = ['.. 2024. 6. 12.
반응형

티스토리툴바