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] 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. 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] 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...
-
[React] React 에서 class 사용하기FRONT-END/React 2020. 11. 4. 15:17
| this.props 란? 한국어로 말하면 "이 속성"이다. 클래스 내에서 기술했으니 클래스 안에서 정의되어 있는 first 와 last를 의미한다. *함수나 const로 되어있는곳에서는 this.props 가 적용되지 않는다. import React, {Component} from "react"; class MyName extends Component { render(){ const {first,last} = this.props; return( 이름 : {first} {last} 닉네임 : {this.props.first} {this.props.last} ) } } export default MyName; | jsp 와 React의 출력 방식의 차이 jsp 문서에서 표현식 출력 jsp 문서에서 EL ..