Web(46)
-
[React] 이벤트 처리하기
출처: https://ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트 처리하는 방식과 매우 유사하다. 다만, 몇 가지 문법 차이가 있다. React의 이벤트는 소문자 대신 캐멀 케이스(CamelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. HTML Activate Lasers React Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preve..
2023.03.09 -
[React] State
출처: https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 1. Props VS State 공통점 두 객체 모두 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물(현재 화면에 보이는 것)에 영향을 주는 정보를 갖고 있다. 차이점 props는 (함수 매개변수처럼) 컴포넌트에 전달된다. 또한, props는 순수함수처럼(읽기전용) 사용해야하므로 컴포넌트 내부에..
2023.03.01 -
[HTML] input 과 button
1. input 태그의 value 속성 input 태그의 value 속성은 type 속성값에 따라 다르다 button, reset, submit: 버튼 내 텍스트 hidden, password, test: 입력 필드의 초깃값 check, image, radio: 해당 입력필드를 선택시 서버로 제출되는 값 정의 file: value X. 2. button 태그의 type 속성 submit: form을 제출하는 이벤트를 발생시킨다. reset: form안에 작성된 내용 초기화 button: 그 자체에 이벤트가 없다. 자바스크립트와 연결 default값은 submit 3. button 태그의 input 태그의 차이 input 태그는 스스로 닫는 태그. 즉, 하위태그를 추가할 수 없다. button 태그는 하위..
2023.02.22 -
[JavaScript] 모던 자바스크립트 Deep Dive 38장 - 브라우저의 렌더링 과정
웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자. 파싱: 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성한다. 렌더링: 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 1. 요청과 응답 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시작적으로 렌더링하는 것 브라우저에 주소창에 URL을 입..
2023.02.09 -
[JavaScript] 모던 자바스크립트 Deep Dive 37장 - Set과 Map
1. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 동일한 값을 포함할 수 없다. 요소 순서에 의미가 없다. 인덱스로 요소에 접근할 수 없다. 1-1 Set 객체의 생성 Set 생성자 함수로 생성 const set = new Set(); console.log(set); // Set(0) {} 배열에서 중복된 요소 제거 const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i); console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [ 2, 1, 3, 4 ] // Set 이용 const uniq2 = array => [...new Se..
2023.02.08 -
[JavaScript] 모던 자바스크립트 Deep Dive 36장 - 디스트럭처링 할당
디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 1. 배열 디스트럭처링 할당 const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 const [c, d] = [1]; console.log(c, d); // 1 undefined const [e, f] = [1, 2, 3]; console.log(e, f); // 1, 2 const [g, ,h] = [1, 2, 3]; console.log(g, h); // 1, 3 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다. // 기본값 con..
2023.02.08