FRONT-END/React
-
[React] CRUDFRONT-END/React 2020. 11. 5. 16:01
| App.js import React, { Component } from 'react'; import { BrowserRouter, Link, Route } from 'react-router-dom'; import Home from './components/Home.js' import Profile from './components/Profile.js' import About from './components/About.js' import './css/style.css' class App extends Component { render(){ return ( HomeA ProfileA AboutA ); }// render end } export default App; | Home.js import Rea..
-
[React] 펼치기FRONT-END/React 2020. 11. 5. 15:45
| 펼치기란 ? 펼치기는 map/reduce/filter 에 해당되지 않는 것인데, 코드가 굉장히 간결하다. let values = [3, 1, 3, 5, 2, 4, 4, 4]; let uniqueValues = [...new Set(values)]; // uniqueValues is [3, 1, 5, 2, 4] let nested = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let flat = nested.reduce((acc, it) => [...acc, ...it], []); console.log(flat); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]
-
[React] Filter 메소드 예제FRONT-END/React 2020. 11. 5. 14:28
| Filter Filter 메소드는 말그대로 필터링을 해주는 함수로, 함수에 주어진 조건에 참인 모든 요소들을 모아 새로운 배열로 반환한다. | Filter 예제 1 배열 arr 의 안에 있는 값들 중 10보다 큰 수만 모아 새로운 배열 arr_filter 을 생성한다. let arr = [1,2,3,4,5,6,7,8,9,123,222]; let arr_filter = arr.filter(v => v > 10) console.log(arr_filter) // 결과값 : [ 123, 222 ] | Filter 예제 2 filter() 함수는 인자로 제공되는 함수에 의해 test 를 통과한 모든 요소를 새로운 array 로 만든다. 따라서 filter 함수를 사용하려면 매개인자로 참과 거짓을 가릴 수 있는..
-
[React] 배열을 출력하기 위해 Map 메소드 사용하기FRONT-END/React 2020. 11. 5. 14:23
| Map 메소드 Map 메소드는 파라미터로 전달 된 함수를 통해 배열의 각 요소를 프로세싱하여 그 결과로 새로운 배열을 생성한다. let arr = [3,4,5,6,7,8,9,123]; let arr_map = arr.map(function(value){ return value*2 }) console.log(arr_map) // 결과값 : [ 6, 8, 10, 12, 14, 16, 18, 246 ] | map을 사용해서 사진을 배열로 출력하기 import React from "react" class MyPic extends React.Component { state = { pics:[ './images/sw01.png', './images/sw02.png', './images/sw03.png', './..
-
[React] Key 값으로 출력하기FRONT-END/React 2020. 11. 5. 12:16
import React from 'react' import './App.css' import Counter from './Counter.js' import MyName from './MyName' export default class App extends React.Component{ state = { idx:7700, nick:'kim', idols:['orange','red','pink','black'], } render(){ let arr = this.state.idols; let str = []; // arr를 담아줄 배열 추가 //key값 사용 for(let i=0; i
-
[React] React 에서 배열 사용하기FRONT-END/React 2020. 11. 5. 12:07
| App.js import React from 'react' import './App.css' import Counter from './Counter.js' import MyName from './MyName' export default class App extends React.Component{ state = { idx:7700, nick:'kim', idols:['orange','red','pink','black'], } render(){ return( App.js )//return end }//render end }//class end | 배열 펼치기 let values = [3,1,3,5,2,4,4,4]; let uniqueValues = [...new Set(values)]; | 배열 웹페이..
-
[React] React에서 생성자 사용하기FRONT-END/React 2020. 11. 5. 11:41
| MyName.js import React from "react" class MyName extends React.Component { static defaultProps = { first:'one', last:'LA', }//end /*생성자*/ constructor(){ super(); var msg='abc'; var msg='zxc'; } render(){ return( MyName.js 닉네임 : {this.props.first} {this.props.last} ); } } export default MyName; | 생성자내에서 super(); 을 사용하지 않으면 에러가 난다. | let 을 썼더니 에러가 난다. | var 를 썼더니 정상적으로 출력이 된다.
-
[React] npm, Node.js, ES6FRONT-END/React 2020. 11. 5. 11:19
| npm 이 뭘까? npm is the package manager for the Node JavaScript platform npm 은 노드 자바스크립트 플랫폼을 위한 패키지 매니저다. | npm 의 위치/경로 C:\Program Files\nodejs npm을 통해서 모듈을 다운받고 그 모듈을 통해 작업을 수행한다. | Node.js 가 뭘까? Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. | ES6 이 뭘까? ES6 은 자바스크립트 표준규격 버전6이다. | 자바스크립트와 ES6 의 다른점? 순수 자바스크립트 ES6 자바스크립트 var 사용 const, let 사용 권장 | 새로운 작업폴더 생성 cd Desktop npx create-react..