배열5 [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] 참조형과 기본 값 비교 자바스크립트 기본형 값의 특징은 변경할 수 없다는 점이다.let userMessage = "Hello";console.log(userMessage); // 주소: 1000 값: HellouserMessage = "Hello there";console.log(userMessage); // 주소: 1001 값: Hello thereuserMessage = userMessage.concat('!!!');console.log(userMessage); // 주소: 1002 값: Hello there!!!userMessage에 다른 값을 저장할 수 있지만, 이렇게 하면 새로운 스트링이 생성된다.기존 메모리에 저장된 스트링이 다른 스트링으로 변경되는 것이 아니다.스트링 변수에 메소드(concat)를 실행해도 기존 스.. 2024. 7. 5. [JS] 스프레드 연산자(...) 원시 값이란 객체가 아니면서 메서드도 가지지 않는 데이터를 말한다.stringnumberbigintbooleanundefinedsymbolnull원시값은 변형할 수 없지만 재할당 할 수는 있다.let a = "hello"; // 주소 : 1000, 값 : helloa = 1; // 주소 : 1001, 값 : 1 재할당은 새 메모리 공간을 확보하는 것이다.값을 저장한 후 변수(a)가 이전에 참조하던 메모리 주소를 변경함(1000 -> 1001)으로써 이루어진다. 원시값을 복사하면 어떻게 될까?let a = 2; // 주소: 1000 값: 2let copiedA = a; // 주소: 1001 값: 2a = 3; // 주소: 1002 값: 3console.log(a); // 3console.log(copie.. 2024. 7. 5. [JS] 배열 및 객체의 분해(디스트럭처링) 배열 분해const userNameDate = ["Max","Kim"];const firstName = userNameDate[0];const lastName = userNameDate[1]; 이렇게 하면 직관적이지만 코드가 길어진다. 이 대신 왼쪽에 []을 놓고 상수 또는 변수를 정의하면 해당 배열을 분해해 배열 값을 가져올 수 있다.const [firstName, lastName] = ["Max","Kim"];console.log(firstName);console.log(lastName); 객체 분해const user = { name: "Max", age: 34}const name = user.name;const age = user.age; 객체 값을 이렇게 가져올 수 있지만 이 또한 길다. 왼쪽.. 2024. 7. 5. [JS] 배열과 배열 메소드 배열도 객체 중 하나이다.배열을 값의 목록을 생성하는 것으로 []를 사용한다.const hobbies = ["sports","cooking","reading"];console.log(hobbies[0]);객체는 키-값 쌍으로 값 그룹을 묶지만, 배열을 값만을 순서대로 저장하며 목록의 위치에 따라 값을 액세스할 수 있다.배열을 저장하는 변수 또는 상수 이름 뒤에 [] 대괄호를 사용해 배열의 값에 접근한다.[] 대괄호에 출력하고자 하는 원소의 인덱스를 넣으면 된다.인덱스는 0부터 시작한다.배열은 모든 유형의 값을 저장할 수 있다. 객체, 숫자, 문자열 등 배열에 저장된 값을 변환하거나 읽는데 사용할 수 있는 다양한 내장 메소드가 존재한다. push() 원소를 추가할 수 있다. const hobbies =.. 2024. 7. 5. 이전 1 다음 반응형