Front-End15 [자바스크립트 DeepDive] 타입 변환과 단축 평가 9장 타입 변환과 단축 평가 타입 변환 명시적 타입 변환 : 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환 : 개발자의 의도와는 상관없이 표현식을 평가하며 자동 변환되는 것 문자열 타입으로 변환 String 생성자 함수를 new 연산자 없이 호출하는 방법 Object.prototype.toString 메서드 문자열 연결 연산자 숫자 타입으로 변환 Number 생성자 함수를 new 연산자 없이 호출하는 방법 parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능) 단항 산술 연산자를 이용하는 방법 산술 연산자를 이용하는 방법 불리언 타입으로 변환 Boolean 생성자 함수를 new 연산자 없이 호출하는 방법 ! 부정 논리연산자를 두 번 사용하는 방법 .. 2022. 5. 3. [리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 7장 컴포넌트의 라이프사이클 메서드 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하다. Hooks 기능을 활용해 함수컴포넌트에서도 비슷한 작업은 가능하다. 라이프사이클 메서드의 이해 마운트 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props 에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링.. 2022. 5. 3. [리액트를 다루는 기술] 6장 컴포넌트 반복 6장 컴포넌트 반복 자바스크립트 배열 map()함수 문법 callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 arr.map(callback,[thisArg]) map함수를 활용한 컴포넌트 반복 key key 설정key 값은 언제나 유일해야 한다. 단, 고유한 값이 없을 때만 index값을 key로 사용 → index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 불가 key 값을 설정할 때는 map함수의 인자로 전달되는 함수 내.. 2022. 5. 2. [의문점] react event (pass parameter) 의문점 리액트를 다루는 기술 공부 중 아래와 같은 문제 발생 onDoubleClick={onRemove(name.id)} (실패) onDoubleClick={()=>onRemove(name.id)} (성공) 두 가지의 차이점에 대해 의문점이 생겨서 확인해봤다. 기존에 이벤트에 함수를 전달할 때는 아래와 같이 전달했었다. onClick={handleClick} 위와 같은 함수 전달은 함수를 전달할 뿐 실행은 하지 않기 때문에 가능. 하지만 parameter를 전달할때는 문제가 발생했다. 해결 1. parameter를 전달하지 않는 함수 전달 import React from "react"; const EventSample = () => { const onClickHandler = () => alert("su.. 2022. 5. 2. 이전 1 2 3 4 다음