자바스크립트
-
이벤트 - 이벤트 버블링과 캡쳐링JAVASCRIPT 2022. 4. 18. 15:55
개발할 때 이벤트 핸들러 등록을 쉽게 또 자주 하는데 (클릭, 키보드 입력, 마우스 이동시 등등... 함수 호출) 그동안은 용어에 대한 숙지가 부족한 채로 사용만 한 것 같아 확실히 정리해보자!! 이벤트란 뭘까? 이벤트 = 행동. 브라우저 안에서 어떠한 함수가 호출될 행동을 하는 것을 이벤트라고 한다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고 브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 이벤트 타입이 200여 가지나 있다는데..(써본 게 별로 없는......;;) 이벤트 타입 상세 목록 확인 리액트 이벤트 핸들러 등록 import React from "react"; const Test = () => { return ( {console.log("안녕!"..
-
[스파르타코딩클럽] 리액트 React.js week 1-3SPARTA CODING CLUB 2021. 8. 9. 15:50
JSX 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html) 그럼 리액트에서 어떻게 뷰를 그릴까요? JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다. HTML을 품은 JS === JSX! 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있어요. JSX 규칙 태그는 꼭 닫아주기 // input 태그를 닫지 않고 넣어볼거예요! function App() { return ( ); } 무조건 1개의 엘리먼트를 반환하기 return ( 안녕하세요! 리액트 반입니다 :) // 에러! ); JSX에서 javascript 값을 가져오려면 중괄호를 사용 const cat_name = 'perl'; // r..
-
[스파르타코딩클럽] 리액트 React.js week 1-2SPARTA CODING CLUB 2021. 8. 4. 21:04
Array 내장 함수 map: 배열에 속한 항목을 원하는 대로 변환하고 새로운 배열을 만들 때 사용하는 함수. 원본 배열은 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(new_array); // (6) [1, 2, 3, 4, 5, 6] // 원본 배열은 그대로 있죠! console.log(array_num); // (6) [0, 1, 2, 3, 4, 5] filter: 조건을 만족하는 항목들을 골라서 새 배열로 만들어 주는 함수. 원본 배열은 변하지 ..