🎃외부 style로 css 적용

// App.js파일

import "./App.css";

import MyHeader from "./myHeader";
import MyFooter from "./MyFooter";

function App() {
  return (
    //JSX문법
    <div className="App">
    //html에서의 class는 JSX문법에서는 className이므로 주의
      <MyHeader />
      <h2>핫바디를 원하니</h2>
      <b id="gold">일해 이년아</b>
      <MyFooter />
    </div>
  );
}

export default App;

//App.css파일

.App {
  background-color: black;
}
h2 {
  color: red;
}
#bold_text {
  color: green;
}

🎃 내부 style로 css 적용

//App.js파일

import logo from './logo.svg';
// import './App.css';
import MyHeader from './MyHeader';
import MyFooter from './MyFooter';

function App() {
  let name = "효진아"

  //인라인 css
  const style = {
    App :{
      backgroundColor: "black"
    },
    h2:{
      color : "red"
    },
    gold :{
      color : "gold"
    }
  }

  return (
    <div style ={style.App}>
      <MyHeader />
          <h2 style={style.h2}>핫바디를 원하니 {name}</h2>
          <b style={style.gold} id="gold">일해 이년아</b>
      <MyFooter />
    </div>
  );
}

export default App;

App()함수 내에 style의 정보를 가지고 있는 객체를 생성해 { }를 이용해 객체의 점표기법을 이용해 스타일의 값을 변경할 수 있다.

style={style.App}
style={style.h2}
style={style.bold_text}

💖 JSX 문법

1. { }안에는 문자열, 숫자, 연산, 함수 호출을 할 수 있다.

cosnt func=()=>{
  return '함수'
}
  return (
    <div >
      <MyHeader />
          <h2>핫바디를 원하니 {name}</h2>
			// 문자열 -><h2>핫바디를 원하니 {"효진아"}</h2>
			//숫자열,연산 -> <h2>핫바디를 원하니 {1+2}</h2>
			//함수호출 -> <h2>핫바디를 원하니 {func()}</h2>

			//**하지만 객체나 배열, boolean은 브라우저에 나타나지 않는다.

          <b id="gold">일해 이년아</b>
      <MyFooter />
    </div>
  );

다만, 결과 값이 문자열, 숫자 일때만 브라우저에 나타나며 배열, 객체, boolean와 같은 것들을 나타나지 않으니 주의하자

2. 조건부 랜더링

let number =5;

  return (
    <div >
      <MyHeader />
          <h2>핫바디를 원하니 {name}</h2>
	      <b id="gold">
            {number}는 : {number%2 ===0 ? "짝수":"홀수"}</b>
      <MyFooter />
    </div>
  );