일안하고블로그

리액트 반복함수리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법이 있습니다. 자바스크립트 배열 함수를 사용 하는 것 인데요 , 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 ..

리액트 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..