JSX 쓰는방법

※ 리액트 중요 필수 개념 3가지
1. 컴포넌트
2. props
3. state
==> 리액트는 모든걸 컴포넌트화 시킨다.

------리액트 JSX
코드 작성 시 return( ) 밑에 쓰는걸 JSX라고함
-JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
  ---------쓰는방법----------
  (1) 태그는 꼭 닫혀있어야 한다
  (2) 두 개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야 한다.
  (3) 자바스크립트 값을 JSX 내부에서 사용할 때는 중괄호 { } 로 감싸주어야 한다.-> js소스 쓸때는 { }로 써야함
  (4) JSX 내부에서 스타일을 사용하게 될 때는 객체 형태로 만들어 넣어주어야 작동하고 'class'가 아닌 'className'을 사용한다
  (5) 주석 작성 방법 {/ 주석은 이렇게 /}

props 란? (property)

상속해줄 키.
부모컴퍼넌트->자식컴퍼넌트에게 전달하는 데이터이고
자식컴퍼넌트에서 직접적으로 수정할 수 없는 값.
수정은 부모컴퍼넌트에서 함.

state

컴포넌트 내부에서 가지고 있는 값=변경할 수 있는 값.

Subject.js 페이지

import React, {Component} from 'react';

class Subject extends Component{
  render(){
      return(
      <header>  {/*중괄호{ }를 이용하여 동적인 값을 랜더링할 수 있다. 리팩토링 개념*/}
        <h1>{this.props.title}</h1>
            {this.props.sub}
      </header>
            );
          }
}

export default Subject;

Content.js페이지

import React, {Component} from 'react';

class Content extends Component{
render(){
    return(
        <article>
            <h2>{this.props.title}</h2>
                {this.props.desc}
        </article>
           );
        }
}

export default Content;

App.js 페이지 ->해당 페이지에서 수정 및 추가 가능함

import React, { Component } from 'react';
import './App.css';
import Subject from "./Components/Subject";
import Content from "./Components/Content";
import TOC from "./Components/TOC";

class App extends Component{
    render(){
    return(
      <div className='App'> { /* props name="값" */}
      <Subject title="WEB" sub="world wide web!"/>
          <Subject title="React" sub="JavaScript library for building user interfaces"/>
          <Subject title="Node JS" sub="JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램 "/>
         
          <Content title="Java" desc="자바는 객체지향 언어이면서 이벤트 처리 중심 언어이다."/>
          <Content title="Database Design" desc="웹 개발자가 되려면 데이터 베이스 설계가 아주 중요합니다"/>
          <Content title="Javascript" desc="Javacript는 사용자와 상호작용하는 객체기반 언어이다"/>
      </div>
    );
  }
}

export default App;

출력 결과