출처: 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..

출처: 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는 순수함수처럼(읽기전용) 사용해야하므로 컴포넌트 내부에..

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 태그는 하위..

웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자. 파싱: 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성한다. 렌더링: 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 1. 요청과 응답 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시작적으로 렌더링하는 것 브라우저에 주소창에 URL을 입..

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..

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 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..