이벤트 핸들링 이란? 사용자가 웹 브라우저에서 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]]값이 있다. ..
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..
JSX : 자바스크립트의 확장 문법이며 브라우저에서 실행전 번들링에서 바벨을 통해 일반 JS형태로 바꿈 JSX를 사용하면 React.creatElement함수를 사용할 필요가 없기에 편하게 UI렌더링 가능 JSX는 JS문법이 아니다 (바벨로 사용할 수 있게 설정한 것이다) 더보기 ReactDOM.render 컴포넌트 페이지에 렌더링 하는 역활 첫번째 파라미터에서 페이지에 렌더링할 내용을 JSX로 작성 두번째 파라미터에서 해당 JSX를 렌더링할 도큐먼트 내부요소 작성 React.StrictMode 리액트 프로젝트에서 리액트의 래거시 기능들을 사용하지 못하게 하는 기능 나중에 사라질 문자열 ref, componentWillMount 등을 사용했을 때 경고를 출력 JSX의 장점 1️⃣보기쉽고 익숙하다 2️⃣더..
//tip 31 나머지 매개변수로 여러 개의 인수를 변수로 전달하자 //나머지 매개변수로 개수를 알 수 없는 다수의 매개변수를 전달하는 방법을 알아보자. //매개변수를 객체로 전달하는 것은 좋은 방법이지만 객체처럼 전달되는 매개변수들이 서로 다를때 즉, 객체를 다루는 경우에만 좋다. //그렇다면 갯수를 알 수 없는 비슷한 매개변수들을 어떻게 처리해야 하는가? //우선 내장된 arguments 객체를 이용해 해결해 보자. function getArguments() { return arguments; } getArguments(`Bloomsday`, `June 16`); console.log(getArguments(`Bloomsday`, `June 16`)) // { `0`: `Bloomsday`, `1`:..
