언어/JavaScript (18) 썸네일형 리스트형 맵과 셋 모던자바스크립트(ko.javascript.info/map-set)을 필사한 내용입니다. 맵 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. 맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다. new Map() - 맵을 만듭니다. map.set(key, value) - key를 이용해 value를 저장합니다. map.get(key) - key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) - key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) - key에 해당하는 값을 삭제합니다. map.clear() .. Map MDN Web Docs를 필사한 포스팅입니다. Map Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. Map 객체는 요소의 삽입 순서대로 원소를 순회합니다. for...of 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환합니다. 키 동일성 키 동일성은 sameValueZero 알고리즘에 기반합니다. NaN !== NaN 이지만, 그럼에도 NaN은 NaN과 일치한다고 간주하며, 다른 모든 값은 === 연산자의 결과를 따릅니다. 현 ECMAScript 명세는 -0과 +0을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. 브라우저 호환성의 "Key equality for -0 and.. 정규표현식 사용하기 정규식 사용하기 정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다. Method Description exec 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다. test 대응되는 문자열이 있는지 검사하는 RegExp 메소드입니다. true나 false를 반환합니다. match 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다. search 대응되는 문자열이 있는지.. 정규표현식 정규표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드, 그리고 String의 match 메소드, replace 메소드, search 메소드, split 메소드와 함께 쓰입니다. 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다. 정규표현식 만들기 정규식을 만드는 방법에는 두 가지가 있습니다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다. var re = /ab+c/; 정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다. 다른 방법으로는 RegExp 객체의 .. [React] Effect Hook 사용하기 Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다. document.title = `You clicked ${count} times`; }); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 위의 코드는 이.. [React] State Hook 사용하기 Hook 소개에서 아래 예시를 통해 Hook과 친해졌습니다. import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 아래의 클래스 예시와 비교하며 Hook의 특징에 대해 배울 예정입니다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(p.. [React] Hook 개요 Hook은 하위 호환성을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. State Hook 버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 여기 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 여기서 useState가 바로 Hook입니다. Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추.. [React] Hook 소개 Hook의 개요 Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useState라는 새로운 함수는 우리가 "Hook"에서 처음 배우게 될 함수입니다. 이 페이지에서는 왜 우리가 Hook을 React에 추가했는지, 그리고 어떻게 Hook이 어떤 도움을 주는지 설명할 것입니다. Hook의 특징은.. 이전 1 2 3 다음