분류 전체보기
-
[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..
-
[React] React 의 장점과 SPAFRONT-END/React 2020. 11. 5. 10:48
| React 의 보안? 누군가가 내 사이트 소스를 보려고 [페이지소스 보기]를 눌러도, React 에서는 나의 소스를 보여주지 않는 장점이 있다. 즉 보안이 좋다. | index.html | SPA : Single Page Application 싱글 페이지 어플리케이션 React 에서는 문서 이동 없이 한 페이지에서 모든 작업을 처리한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않는것이 아닌(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다. | 어떻게 한페이지에서 처리를 할 수 있을까? 이렇게 함수를 보고 있는 페이지에 바로 호출하고 페이지에 바로 띄우기 때문이다. 그렇기 때문에 속도가 빠르다. | 처리 흐름 index...
-
[React] 1씩 증감하는 함수 만들기카테고리 없음 2020. 11. 4. 16:20
| Counter.js import React from 'react' import logo from './logo.svg' import './App.css' import './css/mystyle.css' import my from './images/torikelly.png' import MyName from './MyName' class Counter extends React.Component{ state = { number : 0, } handleIncrease = () => { this.setState({ //number: this.state.number + 1; 세미콜론X number: this.state.number + 1 }) }//end handleDecrease = () => { this...