본문 바로가기

JavaScript168

[JavaScript] 다양한 배열 메소드 🍭 push 배열 뒷부분에 값을 삽입한다. var arr = ["a", "b", "c", "d"]; arr.push("e"); console.log(arr); // ["a", "b", "c", "d", "e"] 🍭 pop 배열 뒷부분의 값을 삭제한다. var arr = ["a", "b", "c", "d"]; arr.pop(); console.log(arr); // ["a", "b", "c"] 🍭 shift 배열 앞부분의 값을 삭제한다. var arr = ["a", "b", "c", "d"]; arr.shift(); console.log(arr); // ["b", "c", "d"] 🍭 unshift 배열 앞부분에 값을 삽입한다. var arr = ["a", "b", "c", "d"]; arr.unshift.. 2021. 11. 18.

[React] React란? 🌸 React란? 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다. 🌸 React의 장점 Javascript 객체 형태의 Virtual DOM을 사용하여 애플리케이션의 성능을 향상시킨다. Server & Client 사이드 rendering 지원을 통해 브라우저 측의 초기 렌더링 딜레이를 줄이고 SEO 호환도 가능해진다. 🔥 렌더링(Readering)이란? html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것. 컴포넌트의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용이 용이하다.🔥 컴포넌트(Component)란? 재사용이 가능한 UI 단위. props를 input으로 하고 UI가.. 2021. 11. 18.

[React] State & Event 🍷 State '상태'라는 뜻. 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태 값. 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체. State는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다. State는 컴포넌트가 마운트 될 때 기본값을 갖게 되고 우리는 이 State를 활용해 데이터를 변화시켜줄 수 있다. 객체의 형태를 갖고 있다. State를 변경하기 위해서는 setState 함수를 사용해야 한다. class 컴포넌트에서 State를 쓸때는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다. 코드로 작성해보면 더욱 쉽게 이해할 수 있다!.. 고 한다. 🍷 State 객체 클래스형 컴포넌트에서 State, 즉 해당 컴포넌트의 상태를 .. 2021. 11. 18.

[React] Props & Event 💣 Props properties(속성). 단어 뜻 그대로 컴포넌트의 속성값. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다. props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. 즉, props는 부모에서 자식으로 보내주는 속성이다. State와 마찬가지로 코드로 작성해보면 더욱 쉽게 이해할 수 있다!.. 고 한다 💣 Props 객체 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성을 어떻게 정의하는지 알아보자. // Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Compone.. 2021. 11. 18.

[React] map 함수 적용시 key props를 부여하는 이유 React에서 map 함수를 사용할 때 렌더링엔 문제가 없지만 console 창에 이렇게 뜰 때가 있다. mapping하는 과정에서 배열의 각 요소마다 고유한 key 값을 지정해줄 수 있는데, 그것을 생략하면 저런 오류가 뜬다! 그래서 ⭐ list 내의 각 child에는 고유한 key 값이 있어야한다. ⭐ 🔥왜 key 값을 줘야할까? React는 렌더링 할 때 기존 배열과 새로운 배열을 비교해서 변경된 부분만 다시 렌더링한다. 따라서 요소가 변경되었을때 더 빠르고 효율적으로 렌더링 하기 위해 요소 고유의 key 값을 준다. 참고 사이트 ▶ 리스트와 Key - React 2021. 11. 18.

유사 배열 객체(Array-Like Object) 🚜 유사 배열 객체(=연관 배열) 배열과 비슷한 객체. length 프로퍼티를 가진 객체를 유사 배열 객체(Array-Like Object)라고 한다. DOM에서 가져온 element들 대표적인 예로 들 수 있다. let Object = { 0: 'a', 1: 'b', 2: 'c', length: 3 } 유사 배열 객체는 위와 같이 length 프로퍼티를 가지고 있다. 주된 용도는 key로 값을 뽑아내는 것이다. JavaScript에서는 객체를 연관 배열로 사용하는 것이 정석이라고 한다. console.log 찍어서 개발자 도구로 확인 할 수 있다. 🚜 특징 객체임에도 불구하고 JavaScript의 표준 배열 메소드를 사용할 수 있다. 유사 배열 객체는 배열이 아니기 때문에 배열 메서드를 사용할 수 없다.. 2021. 11. 18.

이전 1 2 3 4 5 6 7 8 ··· 28 다음

티스토리툴바