import './App.css';

const user = {
  firstName : "Hong",
  lastName : "GilDong"
}

function Student(u) {
  return u.firstName + " " + u.lastName;
}

function App() {
  const isStudent = true;
  return (
    <div className="App">
      <Com1/>
      <h1>The Joeun React 2024</h1>
      <h3>component 실습</h3>

      {isStudent ? <h4>{Student(user)}님 환영합니다</h4> : <h4>학원생이 아닙니다</h4>}
    
      <Com1></Com1>
      <Com1/>
    </div>
  );
}

function Com1() {
  return (
    <>
      <h2>[THIS IS COMPONENT]</h2>
      <p>K-Digital Training</p>
      <p>의료용 AI 연동 개발 실무 프로젝트</p>
      <ul>
        <li>Java</li>
        <li>SpringBoot</li>
        <li>React</li>
      </ul>
    </>
  )
}

export default App;

import './App.css';

function App() {
  // 변수나 함수 정의하여 사용
  const name = '더조은';
  let classnames = '의료용 영상';
  var value = '변수들';
  const funcName = () => {
    return '함수에서 문자 반환';
  }

  // 사용할 때는 {}안에 넣어서 사용
  return (
    <div className="App">
      <h1>{name}에 오신것을 환영합니다</h1>
      <h2>과정명 : {classnames}</h2>

      <h3>중괄호 안에 넣을 수 있는 것들</h3>
      <ul>
        <li>{"문자"}와 {1+5}숫자 가능</li>
        <li>{funcName()} : 함수 가능</li>
        <li>{value} : 변수에 들어있는 값 출력 가능</li>
      </ul>

      <h3>중괄호 안에 넣을 수 없는 것들</h3>
      <ul>
        <li>{true} 불리언 불가</li>
        <li>{[]} : 배열 불가</li>
      </ul>
    </div>
  );
}

export default App;

import './App.css';

function App() {
  const isStudent = false;
  return (
    <div>
      {/* 삼항연산자로 인식하게 하려면 { }를 넣어야 됨
          중괄호가 없으면 글자로 인식
      */}
      {isStudent == true ? <h1>학생입니다</h1> : <h1>학생이 아닙니다</h1>}
    </div>
  )
}

export default App;

/*
// 1. 별도의 파일로 style사용

import './App.css';

function App() {
  return (
    <>
      <h1>더조은에 오신것을 환영합니다</h1>
      <h3>의료용 디지털 영상 표준활용 실무 프로젝트 과정</h3>
      <p className="class1">react style적용하기</p>
      <p id="id1">id로 style적용하기</p>
    </>
  );
}
*/

/*
// 2. style을 변수에 객체로 저장하여 사용
function App() {
  const style = {
    div : {
      backgroundColor : 'green',
      padding : '50px',
      textAlign : 'center',
      fontSize : '30px'
    },
    h1 : {
      color : "red"
    },
    class1 : {
      color : "yellow"
    },
    id1 : {
      color : 'pink'
    }
  }
  return (
    <div style={style.div}>
      <h1 style={style.h1}>더조은에 오신것을 환영합니다</h1>
      <h3>의료용 디지털 영상 표준활용 실무 프로젝트 과정</h3>
      <p style={style.class1}>react style적용하기</p>
      <p style={style.id1}>id로 style적용하기</p>
    </div>
  );
}
*/

// 3. inline방식으로 style주기
function App() {
  return (
    <div style={{textAlign:'center'}}>
      <h1 style={{color:'red', backgroundColor:'green'}}>더조은에 오신것을 환영합니다</h1>
      <h3>의료용 디지털 영상 표준활용 실무 프로젝트 과정</h3>
      <p>react style적용하기</p>
      <p>id로 style적용하기</p>
    </div>
  );
}
export default App;

div {  /* div는 무조건 root를 의미 : <></> , <div></div>, <Fragment></Fragment> */
  background-color: rgb(5, 5, 64);
  color: white;
  padding: 50px;
  text-align: center;
}
h1 {
  color: red;
}
h3 {
  background-color: blueviolet;
}
.class1 {
  border: 2px dotted yellow;
}
#id1 {
  color:yellowgreen;
}

import './App.css';

function App() {

  /* 여러줄 주석 */
  // return이 한줄 일때
  // return <h1>React 처음 시작 또 시작 ㅕㅕㅕ</h1>

  // return안이 여러줄 일때
  /*
    1. 소괄호를 반드시 넣어준다
    2. 루트 태그를 반드시 넣어준다
  */
  return ( //주석
    <>{/* 여러줄 일때는 반드시 최상위 태그가 존재해야 된다 */}
      <h1>React</h1>
      <h2>여러줄 리턴</h2>
      {/* 주석 */}
    </>
  )
}

export default App;