IT/스터디9 list와 key 자바스크립트의 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 여러개의 컴포넌트 렌더링 엘리먼트 모음을 만들고 {}를 이용하여 JSX에 포함 시킬수 있다. 자바스크립트의 map() 함수를 이용하여 반복하고 각 항목에 대해 엘리먼트를 반환하도록한다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems.. 2020. 1. 30. Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 일반적인 React의 데이터 플로우에서 props를 부모 컴포넌트가 자식과 상호 작용하는 유일한 수단이다. 자식을 수정하기 위해서는 새로운 props를 전달하여 자식을 다시 렌더링해야 한다. 그러나, 직접적으로 수정해야 하는 경우도 존재한다. Ref 사용 시기 포커스, 텍스트 선택영역, 미디어의 재생을 관리할 때 애니메이션 직접 실행시 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 ※남발하지 않도록 하는 것이 좋다. Ref 생성 ref는 React.createRef()를 통해서 생성되며 ref attribute를 통해 React 엘리먼트에 부착된다. 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼.. 2020. 1. 29. 이벤트 핸들링 DOM 엘리먼트를 처리하는 것과 유사하다. Activate Lasers HTML Activate Lasers React 카멜케이스를 사용하며 리엑트에서는 false를 반환하더라도 기본동작을 방지 할 수 없어 preventDefault를 명시적으로 호출해야한다. Click me HTML function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( Click me ); } React e는 합성이벤트이기에 브라우저에 대한 호환성에 고려할 필요가 없다. ES6클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다.. 2020. 1. 23. 클래스형 컴포넌트, state, props 클래스형 컴포넌트, 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 함수형, 클래스형 컴포넌트의 차이점 함수형 컴포넌트 state 기능 및 라이프 사이클 기능을 사용할 수 없다. 리액트 16.8부터 Hook을 이용해 보완 클래스형 컴포넌트보다 간단 클래스형 컴포넌트보다 메모.. 2020. 1. 22. 이전 1 2 3 다음