ref: DOM에 이름 달기 ref는 어떤 상황에 사용해야 하나? ref는 꼭 DOM을 직접적으로 건드려야 할 때 사용한다. 리액트에서는 굳이 DOM에 접근하지 않고 state로 구현가능하다. DOM을 꼭 사용해야 하는 상황 (state로 해결 불가능한 상황) 1. 특정 input 포커스 주기 2. 스크롤 박스 조작하기 3. Canvas요소에 그림 그리기 ref사용 사용 방법은 두가지가 있다. 1. 콜백 함수를 통한 ref 설정 가장 기본적인 방법으로, ref를 달고자 하는 요소에 ref라는 콜백함수를 props로 전달한다 (콜백 함수안 this.____ 에서 ____에 들어갈 ref 이름 설정이 자유롭다.) {this.input=ref}} /> 2. creatRef를 통한 설정 리액트 내장 함수인 cr..
FE개발자
이벤트 핸들링 이란? 사용자가 웹 브라우저에서 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️⃣더..
