일안하고블로그

리액트 반복함수리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법이 있습니다. 자바스크립트 배열 함수를 사용 하는 것 인데요 , ES6문법과 배열을 다루는 법에 대해서 정리를 하면 좋을 것같습니다. 우선 , 프로젝트를 생성합니다. $ create-react-app dh-use-map 다음 프로젝트로 들어가서 $ cd dh-use-map프로젝트를 실행합니다. $ yarn start다음 화면이 뜨면 성공입니다. App.js를 변경 해보겠습니다. 다음, 리액트에서 map을 테스트 하기위해서 MapTest.js를 만들겠습니다. import React, { Component } from 'react';import './App.css';import MapTest from './MapTest'; class ..

React 이벤트 핸들링 기초 사용법리액트에서 onClick 과 같은 이벤트를 작성하는 방법이 약간 다르고, 기초 적이지만 중요한 부분을 정리를 해보았습니다. 1. 이벤트의 이름은 'onclick' 이 아닌 'onClick' 으로 (카멜케이스) 작성.2. 이벤트는 함수의 형태 값을 전달한다. 3. DOM 요소에서만 이벤트 설정 가능. 다음 3가지는 이론 적인 것이고 이제 실제로 예제를 만들어서 3가지에 대해서 정리를 해보려고 합니다. create-react-app으로 프로젝트를 만듭니다. $ create-react-app dh-event-input 설치가 완료 되었으면, 프로젝트 폴더 이동 $ cd dh-event-input 프로젝트 이동후, 실행. $ yarn start 화면이 나오면 성공입니다. 이제..

리액트 JSX - Fragment 사용 React에서 컴포넌트를 나누어서 개발을 할때 불필요하게 div를 반드시 감싸고 내부터 태그를 삽입 하다보면 불필요하게 DOM구조가 복잡해 진다고 느껴질때가 있습니다.Fragment를 통해서 불필요한 div 랜더링을 생략 할 수 있습니다. Fragment는 리액트 v16 이상에서 사용가능합니다. import React, { Component, Fragment } from 'react'; class FragmentTest extends Component { render() { return ( 테스트 ); }}export default FragmentTest;간단하게 class를 하나 만들어 봤습니다. 사용법1. 상단에 import {fragment} 추가. impor..