[리액트] JSX & Prop 정리 -노마드코더

노마드 코드 무료 강의 리액트 공부 중입니다. 개념이나 이론 보다 히스토리를 남기기위해 기본 코드마만 적은것 입니다.

기본 설치후 리액트를 실행후,

필요 없는 파일은 다 지운 상태 (필요없다기 보다 내가 사용하지 않는.)

JSX와 Props 개념만 배운 후 중간 정리 단계.

폴더를 다 닫은 상태

public 폴더와 src 폴더 연 상태

Public 폴더 > index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
		//여기가 루트

  </body>
</html>

src 폴더 > index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));
//  <App /> ->componant는 HTML 을 반환하는 함수

index.html 과 app.js에서의 코드를 연결해주는 중간 역활이 index.js

src 폴더 > App.js

import React from 'react';
import PropTypes from 'prop-types';


const foodILike =[
  {
    id:1,
    name : "kimchi",
    Image : "aa",
    rating:5
  },
  {
    id:2,
    name : "김밥",
    Image : "aa",
    rating:4.5
  },
  {
    id:3,
    name : "쭈꾸미",
    Image : "aa",
    rating:4.8
  },
  {
    id:4,
    name : "gogi",
    Image : "aa",
    rating:4.3
  }
];

function Food({name,pic,rating}){
  return (
    <div>
      <h2>I Like {name}</h2>
      <h4>{rating} / 5.0</h4>
      <div>{pic}</div>
    </div>
  );
}

Food.PropType ={
  name : PropTypes.string.isRequired,
  pic:PropTypes.string.isRequired,
  rating:PropTypes.number.isRequired
};

function App() {
  return (
    <div>
      {foodILike.map(dish =>(
          <Food key={dish.id} name={dish.name}pic={dish.Image} rating={dish.rating} />
      ))}
    </div>
  );
}

export default App;

프로프 설치시

터미널에서

npm install

npm start

를 해서 서버를 재시작

설치하면

package.json 이곳에 프로프 타입 추가됨

{
  "name": "movie_app_b",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "prop-types": "^15.7.2",
    //프로프 타입! 여기
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

결과물

728x90

저작자표시

'인강\개인공부 > 노마드 코더' 카테고리의 다른 글

[노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router (0)	2021.05.06
[리액트] 움직이는 Component-노마드코더 (0)	2021.05.03
[리액트] Component State &Life cycle -노마드코더 (0)	2021.05.03
바닐라 JS로 그림판 만들기 (0)	2021.04.14
바닐라 JS로 크롬 앱 만들기 (0)	2021.04.12