자바스크립트 배열 객체의 내장함수인 map 함수 반복되는 컴포넌트를 렌더링할 수 있다 파라미터로 전달된 함수를 사용해, 배열 내 각 요소를 규칙에 따라 변환 결과로 새로운 배열 생성 문법 arr.map(callback,[thisArg]) 파라미터 callback 새로운 배열의 요소를 생성하는 함수, 파라미터는 세가지 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 var numbers=[1,2,3,4,5]; var processed = numbers.map(function(num){ return num*num; }); ..

일반 HTML 태그에서의 id와 비슷 id 특정 DOM 요소에 id를 달면, css나 자바스크립트에서 해당 id를 찾아 작업 가능 ref 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 사용 이유 JSX 안에서 DOM에 id를 달면 렌더링 시 그대로 전달된다 같은 컴포넌트를 여러번 사용 시 중복id를 가진 DOM이 여러개 생긴다 ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 사용 클래스형 컴포넌트 : createRef : 리액트 내장함수 함수형 컴포넌트 : useRef() : 리액트 훅 클래스형 컴포넌트 콜백 함수를 통한 ref 설정 ref를 달 요소에 ref라는 콜백함수를 props로 전달 이 콜백함수는 ref값을 파라미터로 전달받는다 함수내부에서 파라미터로 받은 ref를 ..

이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 웹 브라우저의 HTML 이벤트와 인터페이스가 동일 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값 전달 DOM 요소에만 이벤트를 설정할 수 있다 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다 리액트가 지원하는 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition 이벤트핸들링 이벤트 연습 { console.log(e); }} /> 콘솔에 기록되는 e 객체는 SyntheticEvent 웹 브라우저의 네이티브 이벤트를 감싸는 객체 이벤트가 끝나면 초기화되므로 정보를 참조할 수..

변수나 함수를 다른 파일에 저장해두고 불러와 사용할 수 있다 A.js에서 데이터를 내보니 B.js에서 사용하기 //A.js var data = "test"; export default data; //B.js import data from './A,js'; export 파일마다 export default 키워드는 한번만 사용 가능 여러개의 변수를 내보내려면 export default 대신 export {data1, data2} import import 변수명 from '경로' export{}로 내보낸 변수를 사용하려면 import {data1, data2} from './A.js'; export했던 변수명을 그대로 써야한다 원하는 변수명만 써도 된다 //data...

컴포넌트에서 컴포넌트로 전달하는 데이터 리액트 컴포넌트로 넘어가는 매개변수 컴포넌트를 효율적으로 재사용할 수 있다 데이터는 문자열을 제외하고 {}로 감싼다 function App() { return ( Hello ); } 데이터를 받는 컴포넌트 function Food(args){ console.log(args); return I like potato; } 받은 데이터를 사용할 때 function Food(args){ console.log(args); return I like {args.fav}; } 컴포넌트의 재사용 function Food({fav}){ return I like {fav}; } function App() { return ( Hello ); } Food 컴포넌트에 서로다른 props를 ..

App.js import React from 'react'; function App() { return ( Hello ); } export default App; App()함수가 정의하고있고, 함수가 html(jsx)를 반환하고있다 App컴포넌트를 정의한 것 App()함수가 반환한 jsx가 화면에 그려진다 컴포넌트의 생성 컴포넌트명.js 파일 생성 파일이름은 대문자로 시작 코드의 시작 : import React from 'react'; 반환값 입력 (JSX) 코드의 끝 : export default Potato; index.js ReactDOM.render( , document.getElementById('root') ); 컴포넌트의 사용 App.js impor..