JSON 형태로 데이터 저장하기

 

흠...서버와 통신을 하기 위한 밑밥같은...소스임...

useEffect() 함수는 나중에 공부해야 할것임.

 

import React, { useState, useEffect } from 'react';

function Hero(props) {

    //JSON 형태로 데이터 저장하기

    const  [heroState, setHeroState] = useState([

        {"id":"1", "name":"홍길동", "description":"율도국 세움"},

        {"id":"2", "name":"이순신", "description":"전쟁의 신"},

        {"id":"3", "name":"강감찬", "description":"귀주대첩"},

        {"id":"4", "name":"데니슈", "description":"멋쟁이"},

        {"id":"5", "name":"대한량", "description":"이상적인 인간"},

    ]);

    useEffect( () => {

        setHeroState(

            heroState.concat (

                {"id":"6", "name":"김종서", "description":"사군육전"},

                {"id":"7", "name":"태종", "description":"사병혁파"},

                {"id":"8", "name":"광종", "description":"조세정리"},

            )

        );

    }, []);

    // fetch : 리액트전용 라이브러리

    // Axios : 다른 프로그램에서도 같이 사용할 수 있다. AJAX 통신을 담당한다.

    // 비동기 모드, 별도의 라이브러리를 반드시 설치하고 사용법 따로 배워야 한다.

    // 절대로, react, vue, angular나 polymer 등은 직접연결하지 않는다.

    // 단, 데이터를 json으로 주고 받아야한다..

    // 자바스크립트가 남의 IP나 도메인 포트번호가 다를 때 서로 다른 사이트로 인식되어서

    // 서로 정보를 주고 받을수 없다.

    // 1. 클라이언트 쪽에 proxy를 만들어서 우회했었는데 보안상 못씀

    //   proxy가 react script 5.0 이상부터 작동 안한다.( CORS 정책오류)

    /*

        REACT

        NODEOS\

        1. 클라이언트쪽에서 PROXY 만들어서 서버로 접근()

        2. 서버쪽에서 CORS 를 무력화 시키는 라이브러리를 설차힌다.

    */

    return (

        <div>

            <table>

                {

                    heroState.map( (item, index) => {

                        // item 은 JSON 형태로 전달된다.

                        return (

                            <tr>

                                <td>{item.id}</td>

                                <td>{item["name"]}</td>

                                <td>{item.description}</td>

                            </tr>    

                        )

                    })

                }                

            </table>            

        </div>

    );

}

export default Hero;