이벤트 핸들링 이란? 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 이벤트라고 함 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 HTML 이벤트와 동일하기에 사용법이 비슷하다. onChange 이벤트 햄들링하기 -설정- 1️⃣ e객체는 syntheticEvent로 웹브라우저의 이벤트를 감싸는 객체이다. 2️⃣ 네이티브 이벤트와 인터페이스가 같으므로 순수JS에서 HTML이벤트와 같이 사용가능하다. 3️⃣ syntheticEvent는 네이티브 이벤트와는 달리 이벤트가 끝나면 이벤트가 초기화되어 정보참조 불가능하다. 4️⃣ 비동기적으로 이벤트 객체 참조시 .persist() 함수를 호출하여 사용한다.(버전 17 부터는 폴링 안된다.) state에 input값 담기 const onChangeMess..
분류 전체보기
7장 컴포넌트의 라이프사이클 메서드 1) 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 2) 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3) 라이프사이클 메서드는 클래스 컴포넌트에서만 사용 가능하다. (함수형 컴포넌트에서는 Hooks를 사용해 비슷하게 처리할 수 있다) 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 업데이트 전후 작업을 처리, 불필요한 업데이트를 방지해야 할 수도 있다. 7️⃣.1️⃣ 라이프사이클 메서드의 이해 총 9가지 메서드가 있다. Will 접두사가 붙으면 작업 전 실행되는 메서드 Did 접두사가 붙으면 작업 후 실행되는 메서드 라이프사이클은 총 3가지, 마운트 - 업데이트 - 언마운트 카테고리로 나뉜다. 마운트 : DOM이 생성..
Chapter 3 네이티브 네이티비는 내장된 함수이다. 가장 많이 쓰는 네이티브 - String() ➡ 네이티브는 생성자 처럼 사용 가능하지만, 실제 생성되는 원시값이 아닌 원시 값을 감싼 객체 타입이다. - Number() - Bollean() - Array() - Object() - Function() - Date() - Error() - Symbol() 3️⃣.1️⃣ 내부[[class]] typeof 가 object인 값에는 [[class]]라는 내부 프로퍼티가 있지만(전통적인 클래스 보다는 내부 분류법의 일부), 이 프로퍼티는 Object.proptype.toString()에 메서드를 넣어 호출해야 접근 가능하다. 배열은 "Array", 정규식은 "RegExp" 내부 [[class]]값이 있다. ..
컴포넌트에 대해 알아볼 것이다. 컴포넌트는 클래형 컴포넌트와 함수형 컴포넌트가 있다. 💙함수형 컴포넌트를 사용하는 것이 더욱 편리하고 깔끔해 보여서 리액트 개발자들도 사용을 추천한다.💙 하지만, 함수형만 알면 안될거 같아 클래스형 컴포넌트도 정리하겠다. 3.1 클래스형 커포넌트 컴포넌트 선언 방식 중 클래스형 컴포넌트이다. import { Component } from 'react'; class MyComponent extends Component{ render() { const name = react; return ( {name} ); } } export default MyComponent; 클래스형 컴포넌트에서는 render함수가 꼭 있어야 하며, 유저에게 보여주고자 하는 JSX를 return을 통해..
2️⃣.4️⃣ 특수값 : JS개발자들이 조심해야 하는 특수값들 2️⃣.4️⃣.1️⃣ 값이 아닌 값 undefined 타입의 값은 undefined, null 타입의 값은 null 뿐이다 ( 타입과 값이 같다 ) null : 빈 값이다. 값이 있었지만 현제는 없는 상태 (식별자가 아닌 키워드로, null이라는 변수에 할당 X) undefined : 실종된 값. 값을 아직 갖지 않은 것 (undefined는 식별자로 사용가능) 2️⃣.4️⃣.2️⃣ Undefined 느슨한 모드에서는 전역 스코프에서 undefined란 식별자에 값을 할당할 수 있다. // 이 두개 모두 비추이다... 하지만 모드에 상관없이 undefined라는 이름을 갖는 지역변수를 생성할 수 있다. // 이 두개 모두 비추이다... voi..
2️⃣.1️⃣ 배열 JS 배열은 문자열, 숫자, 객체, 다른배열( 다차원 배열 )을 담을 수 있는 그릇이다. const a = [1, "2", [3]]; console.log(a); // [1, '2', [3]] a[3] = 4; console.log(a.length); // 4 a["key"] = "value"; console.log(a); // [1, '2', [3], 4, key: 'value'] console.log(a.length); // 4 또한 빈 배열을 주의하자. 그리고 값은 나중에 추가할 수 있다 let b = []; b[0] = 1; b[2] = 3; console.log(b); // [1, empty, 3] 이때는 a[1]에 undefined 하는 것과는 다르다. console.log..
