JSX

JSX : javascript + xml

1. 닫는 규칙

<div></div> 또는 <image />(셀프클로징 태그)

2. 컴포넌트를 return하려면 하나의 부모를 가져야 한다

function App() {
  return (
    <div className="App"> //div로 감쌌음
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리액트</h2>
      </header>
      <MyFooter />
    </div>
  );
}

또는 React.Fragment를 사용
: React.Fragment를 사용하면 바로 위의 태그에 안에 내용들을 그대로 넣어줌

import React from 'react'; //Fragment사용에 앞서 React불러와줌
function App() {
  return (
	<React.Fragment>
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리액트</h2>
      </header>
      <MyFooter />
	</React.Fragment>
  );
}

React.Fragment도 귀찮다면
빈 태그를 넣어줘도 같은 결과가 나옴

function App() {
   return (
   <>
       <MyHeader />
       <header className="App-header">
         <h2>안녕 리액트</h2>
       </header>
       <MyFooter />
   </>
   );
 }

3. class 사용법

HTML = <div class='' >
JSX = <div className='' >

4. inline style

따로 css파일로 작업하지 않고 해단 컴포넌트 작업공간에서 style적용
( CamelCase로 사용해야 함 )

function App() {
  const style = {
    App: {
      backgroundColor: 'black',
    },
    h2: {
      color: 'red',
    },
    bold_text: {
      color: 'green',
    },
  };

  return (
    <div style={style.App}>
      <MyHeader />
        <h2 style={style.h2}>안녕 리액트</h2>
        <b style={style.bold_text}>React.js</b>
      <MyFooter />
    </div>
  );
}

5. { 변수/값/식 } 사용

숫자나 문자만 가능
[ ],false 등은 사용 불가

const name = '안녕리액트'
const func = () => {
	return 'func'
}
const number = 5;

  return (
    <div style={style.App}>
      <MyHeader />
        <h2>{name} : 변수사용 가능</h2>
      	<p>{1 + 2} : 계산식도 가능</p>
        <p>{func()} : 함수도 사용 가능</p>
      	<p>{number}는 {number % 2 === 0 ? '짝수' : '홀수'}</p>
      	// 5는 홀수
      <MyFooter />
    </div>
  );
}

---

공부하며 정리&기록하는 ._. 씅로그