[React] React 의 장점과 SPA

 

| React 의 보안?

누군가가 내 사이트 소스를 보려고 [페이지소스 보기]를 눌러도, React 에서는 나의 소스를 보여주지 않는 장점이 있다. 즉 보안이 좋다.

| index.html

 

| SPA : Single Page Application 싱글 페이지 어플리케이션

React 에서는 문서 이동 없이 한 페이지에서 모든 작업을 처리한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않는것이 아닌(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.

 

 

| 어떻게 한페이지에서 처리를 할 수 있을까?

<button onClick='this.method'> 이렇게 함수를 보고 있는 페이지에 바로 호출하고 페이지에 바로 띄우기 때문이다. 그렇기 때문에 속도가 빠르다.

 

| 처리 흐름

index.js --> App.js --> return --> <div> 내용 출력

 

 

| 함수의 형태

어제 함수를 어떻게 호출하는지에 대해 포스팅했다. 함수를 구현하는 방법에는 class, function, const 과 같이 여러가지형태가 있다.

 

class Myname

import React from "react"

class MyName extends React.Component {
    static defaultProps = {
        first:'one',
        last:'LA',
    }//end

    render(){
        return(
            <span>
                MyName.js 
                닉네임 : {this.props.first} {this.props.last}
            </span>
        );
    }
}

export default MyName;

 

function MyName

function MyName({first,last}){
    return(
        <span>
            이름: {first} {last}
        </span>
    )
}
export default MyName;

 

const MyName

const MyName = ({first,last}) => {
    return(
        <span>
            닉네임: {first} {last}
        </span>
    )
}
export default MyName;

App.js에 import 후 사용

 

 

참고 블로그 1 ] velopert.com/3417

참고 블로그 2 ] velog.io/@josworks27/SPA-%EA%B0%9C%EB%85%90