목차

프로젝트 만들기

Part2 를 참고로 프로젝트를 작성하십시오.

json 파일을 준비합시다.

프로젝트 폴더 아래에 code.json라는 파일을 만듭니다.
내용은 json이라면 무엇이든 좋지만, 이번에는 아래를 사용합니다.

{
    "CD001": {
        "NAME": "りんご",
        "SUPP": "赤い甘いフルーツ"
    },
    "CD002": {
        "NAME": "みかん",
        "SUPP": "オレンジ色のやつ"
    },
    "CD003": {
        "NAME": "桃",
        "SUPP": "白とかピンクのちょっと高級やつ"
    }
}

json을 읽어보십시오.

pages 아래에 read-json.tsx라는 파일을 만듭니다.

import React from 'react';
import Code from '../code.json';

export const ReadJson: React.FC = () =>{

    /** jsonデータ編集 */
    const cdList = [];
    for (var cdNo in Code) {
        for (var cd in Code[cdNo]) {
            const cdStr = <div>
                               {cdNo + '-' + cd + '-' + Code[cdNo][cd]}
                          </div>;
            cdList.push(cdStr);
        }
    }

    /** レンダー部分 */
    return (
        <>{cdList}</>
    );
};

export default ReadJson;

표시해보기

터미널에서 yarn dev 를 실행하여 http://localhost:3000/read-json 에 액세스합니다.

아래와 같은 표시가 되면 OK군요.

그건 그렇고

json의 어떠한 설정을 어딘가에 한 것 같은 생각이 들지만, 잊어버렸습니다.
상기 시험해, 에러가 된 등의 정보 가르쳐 주시면 감사합니다.
(시간을 찾아 새로운 환경에서 다시 시도해 보십시오.)

이상