jsx 기본 문법, react

jsx 기본 문법

react

<html>
  <body>
  	<top></top>
	<sidebar></sidebar>
  </body>
</html>

top , sidebar 같은 태그들을 Component라 함
---> 가독성을 획기적으로 늘린다.
---> 재사용성
---> 유지보수
남이 만든 component를 사용할 수 있게 된다

구동 환경 구축

npm = node.js 의 앱스토어

npm install -g(어디에서든 실행할 수 있게글로벌) create-react-app

권한이 없다면
sudo npm install

create-react-app -v 버전확인

create-react-app . 개발하는데 필요하는거 전체 설치

npm run start 하면 시작

ctrl + c 하면 꺼짐

npm : 설치
npx : 한번 설치하고 지움

<div id="root"> 이 안에 들어가도록 약속해놓음 (html) </div>

id 가 root 인 태그 안에 들어가는 component들은 src ( 소스 )
파일을 수정해서 만듦

실제로 서비스할때는 build 를 사용

npm run build 를 서버 종료하고 한다음,
npx serve -s build (build 를디렉토리로)
하면 속도가 현저히 좋아짐

기본적으로
App.js 파일로 가서

컴포넌트 만드는 코드

import logo from “./logo.svg”;
import React, { Component } from “react”;
import “./App.css”;

class App extends Component {
  render() {
    return <div className=“App”>Hello, React!!</div>;
  }
}
export default App;

이러한 형태로 만들어 줘야 한다. (렌더라는 메소드를 가지고 있음)

import React, { Component } from “react”;
import “./App.css”;

class App extends Component {
  render() {
    return (
    
    );
  }
}

기본형태 기억하기

컴포넌트의 형태를 바꿔주기

class Subject extends Component {
  render() {
    // function 생략
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}
class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  render() {
    return (
      <div className=“App”>
        <Subject title=“WEB” sub=“world wide app”> </Subject>
        <Subject title=“React” sub=“For UI”></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}
export default App;

{this.props.title}을 사용해서 내용을 원하는대로 수정가능

파일 저장을 따로 하고 임포트,익스포트

import logo from “./logo.svg”;
import React, { Component } from “react”;
import “./App.css”;
import TOC from “./components/TOC”;
import Content from “./components/Content”;
import Subject from “./components/Subject”;
//하나의 컴포넌트는 하나의 태그로 감싸줘야한다.
//여기 이 TOC 대신에 다른파일에서 가져오려면 import TOC from ‘./components/TOC’
//  TOC 목차라는 뜻
// class TOC extends Component {
//   render() {
//     return (
//       <nav>
//         <ul>
//           <li>
//             <a href=“1.html”>HTML</a>
//           </li>
//           <li>
//             <a href=“2.html”>CSS</a>
//           </li>
//           <li>
//             <a href=“3.html”>JavaScript</a>
//           </li>
//         </ul>
//       </nav>
//     );
//   }
// }
// class Content extends Component {
//   render() {
//     return (
//       <article>
//         <h2>{this.props.title}</h2>
//         {this.props.desc}
//       </article>
//     );
//   }
// }
// class Subject extends Component {
//   render() {
    // function 생략
//     return (
//       <header>
//         <h1>{this.props.title}</h1>
//         {this.props.sub}
//       </header>
//     );
//   }
// }
class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  render() {
    return (
      <div className=“App”>
        <Subject title=“WEB” sub=“world wide app”></Subject>
        <Subject title=“React” sub=“For UI”></Subject>
        <TOC></TOC>
        <Content
          title=“HTML”
          desc=“HTML is HYPERText Markup Language”
        ></Content>
      </div>
    );
  }
}
export default App;

이렇게 장황한 apps에 있는 코드를 전부 없애고 따로따로 파일로 저장을해서

Apps에는 import Content from "./components/Content"
이렇게 써주면 가져다 쓸 수 있다.

./components/Content 파일은

import React, { Component } from “react”; // 고정!!!!
class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}
export default Content; //export default 고정!!

이렇게 해주면 내보낼 수 있다. 이 안에서 여러개라면 여러개 사용가능

Author And Source

이 문제에 관하여(jsx 기본 문법, react), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@judase/react

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

jsx 기본 문법, react