FRONT-END/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] 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 ..
-
[React] React 에서 값 넘기기FRONT-END/React 2020. 11. 4. 14:17
| src 밑에 MyName.js 파일을 하나 만들어준다. | 함수를 작성하고 MyName 이라는 이름으로 이 문서를 사용할 수 있도록 맨 밑에 export default MyName; 로 적어준다. function MyName(){ return( ) } export default MyName; | App.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'; export default class App ext..
-
[React] React 에서 css 사용하기FRONT-END/React 2020. 11. 4. 13:40
| css 파일 css 폴더의 mystyle.css 을 살펴보니 클래스 . 가 있다. 그렇다면 이렇게 사용할 수 있지 않을까? import React from 'react' import logo from './logo.svg'; import './App.css'; import './css/mystyle.css' import my from './images/torikelly.png' export default class App extends React.Component{ handleDelete = () => { alert('삭제 하시겠어요?'); } handleCreate(){ console.log('handleCreate 함수'); alert('신규등록을 하시겠어요?'); } render(){ //jav..
-
[React] React 에서 함수 사용하기FRONT-END/React 2020. 11. 4. 12:19
| 기본적인 함수 사용하기 function move(dt){ let xhr='tis'; if dt >= 0 {let xhr='양수';} else {let msg = '음수';} } | 함수 이름 없이 함수 사용하기 var data = () => { //anonymous 익명의 함수 = 화살표 함수 let xhr='tis'; if dt >= 0 {let xhr='양수';} else {let msg = '음수';} } | 이벤트로 함수 호출하기 ★★★ handleDelete = () => { //anonymous 익명의 함수 = 화살표 함수 let xhr='tis'; //if dt >= 0 {let xhr='양수';} //else {let msg = '음수';} } 삭제 | 맨 마지막 줄에 export de..
-
[React] React 개발환경 구축하기FRONT-END/React 2020. 11. 4. 11:30
cd Desktop 데스크톱으로 이동하기 npx create-react-app danbi 데스크톱에 리액트관련 소스를 디렉토리 danbi 이름으로 생성 시간이 약간 소요된다 cd danbi 다 만들어졌다면 Desktop에 생성된 danbi 디렉토리로 이동 (에러) npm i react-router react-router-dom cd danbi를 하고 했어야했는데, 그렇지 않아서 에러 (에러) npm install react-router-dom cd danbi를 하고 했어야했는데, 그렇지 않아서 에러 (에러) npm i react-router-dom cd danbi를 하고 했어야했는데, 그렇지 않아서 에러 npm i react-router-dom cls 화면 지우기 C:\Users\user\Desktop\..