Front-End/React7 [리액트를 다루는 기술] 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. [리액트를 다루는 기술] 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. [리액트를 다루는 기술] 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 다음