Front-End15 [리액트를 다루는 기술] 5장 ref 5장 ref: DOM에 이름 달기 ref(reference) HTML에서 id를 사용하여 DOM에 이름을 다는 것 처럼 프로젝트 내부에서 DOM에 이름을 다는 개념. 💡 리액트 컴포넌트에서도 id를 사용할 수는 있느나 권장하지 않습니다. 같은 컴포넌트를 여러번 사용할 경우 중복 id를 가진 DOM이 여러개 생긴다. ref는 언제 사용해야 할까? DOM을 꼭 직접적으로 건드려야 할때 사용해야 한다. 콜백함수를 통한 ref 설정 {this.input=ref}} /> 위와 같이 설정하면 앞으로 this.input은 input 요소의 DOM을 가리킵니다. ref를 만드는 가장 기본적인 방법은 콜백 함수를 이용하는 것이다. createRef를 통한 ref 설정 import React, { Component } f.. 2022. 4. 29. [자바스크립트 Deep Dive] 표현식과 문 자바스크립트 Deep Dive 내용정리 5장 표현식과 문 값평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미 EX) 10+20 = 30 //10+20은 평가되어 숫자 값 30을 생성한다. 값은 식이 평가되어 생성된 결과를 말한다. 변수EX) let sum = 10 + 20; // 변수 sum에는 10+20이 평가되어 생성된 숫자 값 30이 할당된다. 따라서, 변수에 할당되는 것은 값이다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 리터럴(literal)자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.. 2022. 4. 27. [리액트를 다루는 기술] Component (props,state) 리액트를 다루는 기술 내용 정리 3장 컴포턴트 함수형 컴포넌트의 장점메모리 자원을 덜 사용한다. 최종 결과물의 파일 크기가 더 작다.(단, 성능, 파일크기 면에서 사실상 큰 차이가 없어 중요하게 생각하지 않아도 괜찮다) 클래스형 컴포넌트 보다 선언하기가 편하다. 함수형 컴포넌트의 단점 state와 라이프사이클 API를 사용할 수 없다.(리액트 v16.8 업데이트 Hooks의 기능으로 해결) 초기에는 클래스형 컴포넌트를 통해 리액트의 기본기를 익히고 Hooks를 이해한 후 함수형 컴포넌트로 사용. ES6 화살표 함수주로 함수를 파라미터로 전달할 때 유용하다. setTimeout(function() { console.log('hello world'); }, 1000); setTimeout(()=> { con.. 2022. 4. 27. 이전 1 2 3 4 다음