JSX(JavaScript + XML)

HTML을 품은 JS ⇒ JSX!

JavaScript를 확장한 문법

JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

function App() {
  return (
    <div>
      리액트에서는 딱 하나의 html 파일만 존재한다.
      (public 폴더 아래에 있는 index.html)
    </div>
  );
}

export default App;

지켜야할 것!

- 태그는 꼭 닫아주기 <input />

- 무조건 1개의 엘리먼트를 반환하기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

- JSX에서 javascript 값을 가져오려면? 중괄호!!!

(값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용)

function App() {
	const cat_name = 'perl';
    const number = 1;
  return (
    <>
    <div>hello {cat_name}!</div>
    <p>안녕하세요! 리액트 반입니다 :)</p>
     {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
     {/* 삼항 연산자를 사용했어요 */}
     <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
     < />
  );
}

- class 대신 className!

- 인라인으로 style 주기

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

---

// 위와 같은내용

 

JSX식에는 부모 요소가 하나 있어야 됨 =>

태그로 하나 묶어줘야 함(빈 태그도 가능, 크롬 브라우저에서는 해석 안함)

import React from 'react';

// 자식 컴포넌트
function Child() {
  return <div>나는 딸입니다.</div>
}

// 부모 컴포넌트
function App() {
  return (
    <>
    <Child/>
    <Child/>
    <Child/>
    </>
  )
}
export default App;

👻컴포넌트 이름은 대문자로 시작

import React from 'react';

function Child() {
  return <div>자식</div>
}

function Mother() {
  return <Child/>
}

function Grandfather() {
  return <Mother/>
}

function App() {
  return <Grandfather/>
}
export default App;

App.js에서

rfc : export default 같이 들어감

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

rfce : function키워드 들어감

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

태그 닫아주기 <~~~~~~~/>

최상위 태그는 하나만! 태그를 하나 더 만들거면 전체를 감싸는 최상위 태그를 만들 것

 

import React from 'react'

function App() {

  let a = 1;
  let b = 2;

  let style1 = {
    color: 'green'
  }

  return (
    <div>
      <p style={style1}>안녕하세요</p>
      <p>{a + b < 10 ? 'true' : 'false'}</p>
    </div>
  )
}

export default App

class 대신 className!

중괄호를 두 번 쓰는 이유 : 객체도 JS

스타일 객체를 변수로 만들고 쓸 수 있음