JSX(JavaScript XML)

7. JSX
1> 개요
- JSX(JavaScript XML)
- 웹브라우저에 랜더링되기전에 html 로 변환된다. ( babel 도구 이용 )
  즉, JSX 는 웹브라우저에 직접 사용이 불가능한 비표준문법임.

2> 특징
- 반드시 root 태그가 있어야 된다.
- 반드시 종료태그가 있어야 된다.
ex>
    <br></br>

- JSX 에서 JS 의 변수값등을 출력할 때는 {변수값} 사용한다.
- {변수값}는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능.
- 논리값(true/false) 와 null, undefined는 {변수값} 사용시 출력이 안됨.
  + && 결합해서 조건부 랜더링을 사용할 수 있음.
  ex> { true && <Menu /> }

- css 적용하는 방법
    가. html 의 class 속성
        - class 속성명 대신에 className을 사용해야 된다.
        ex>
            <div className="xxx"></div>

    나. html 의 <label  for=""> 속성
        - for 속성명 대신에 htmlFor 을 사용해야 된다.
          for 가 js 의 예약어 이기때문이다.
          예약어는 변수 이름, 함수 이름 또는 식별자로 사용할 수 없다.
        ex>
            <label htmlFor="xxx"></label>


    다. html 의 style 속성
        - style 사용할 때는 반드시 중첩 중괄호를 사용해야 된다.
        ex>
            <div style={{css속성명:속성값}}></div>

            기존의 html style 방식은

                <div style="color: red;"></div>

            인데 js 에서는

                <div style={{color: 'red'}}></div>

                var css = {key:value, key:value};
                <div style={css}></div>

            로 사용한다.
    
    * 주의할점
    이전 css 문법의 사용했던 케밥표기법(font-size, background-color, ...)을 사용했는데
    js 문법에서는 카멜표기법(fontSize, backgroundColor, ...) 을 사용해야 된다.
    ex>
        <div style={{fontSize:"red", backgroundColor:"yellow"}}></div>

- && 이용한 조건부 랜더링

    이전 10 && 20 에서 A && B 로 가정했을때 A 가 true 면 B 가 나오고 A 가 false 면 A 가 나온다

ex>
    { 변수 && 함수컴포넌트 } <== 변수가 true 인 경우에 함수컴포넌트가 나오게 되고 false 면 함수컴포넌트가 나오지 않는다.
                                위 방식으로 예를 들어 login 이 되면 실행되고 login 이 안되면 실행안되게 구현이 가능하다.
    { 변수 && <Menu> } <== 변수가 true 이면 <Menu /> 컴포넌트가 랜더링됨.
                           변수가 false 이면 <Menu /> 컴포넌트가 실행안됨.

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

    function Menu() {
        return (
            <div className="Menu">
            <h2>Menu 컴포넌트입니다.</h2>
            </div>
        );
    }

    function App() {

    // let flag = true;
    let flag = false;

        return (
            <div className="App">
            <h2>조건부랜더링</h2>
            {flag && <Menu />} --> false 라서 랜더링되지 않음.
            {!flag && <div>Hello</div>} --> ! 로 인해 true 가 되어서 랜더링됨.
            </div>
        );
    }

    export default App;

- {...변수} 형식의 spread 연산자 사용가능.
- 이벤트 구현식 이벤트핸들러는 카멜표기법을 사용해야 된다.
ex>
    <button 카멜표기법={함수명}>OK</button>
    <button onClick={go}>OK</button>

- JSX 주석
{/* JSX 주석 */}

==> 결론은 JSX 에서 JS 사용할때는 반드시 {} 사용한다.

 

# App.js

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

function App() {
  return (
    <div className="App">
      Hello
    </div>
  );

  // return <div className="App">Hello</div>; // 한줄로 만들게 되면 () 없이 사용가능하지만 가독성을 위해서 () 사용을 권장한다.
}

// 1. 반드시 단 하나의 root 태그 필요 ///////////////////////////////////////////////////////////////
// function App() {
//   return (
//     // <div className="App">

//     // </div>
//     // <div></div> root 태그가 존재하는데 하나더 생성시 에러발생

//     // ----------------------------------------------------
//     // 두개의 <div></div> 를 감싸주면 에러가 발생하지 않음
//     // ↓ 두개의 <div></div> 를 묶어주는 용도
//     //   <div> 태그로 사용해도 되고 <> 빈태그로 사용해도 된다.

//     // <div>
//     //   <div className="App">
//     //     Hello
//     //   </div>
//     //   <div>
//     //     World
//     //   </div>
//     // </div>

//     // 위 와 아래의 방법중 선택으로 사용하면 된다.

//     <>
//       <div className="App">
//         Hello
//       </div>
//       <div>
//         World
//       </div>
//     </>
//   );
// }
///////////////////////////////////////////////////////////////////////////////////////////////////

// 2. JSX 에서 JS 의 변수값등을 출력할 때는 {변수값} 사용한다. ////////////////////////////////////////
// function App() {

//   let name = "홍길동";
//   const age = 20;

//   return (
//     <div className="App">
//       이름: {name}<br></br>
//       나이: {age}<br></br>
//     </div>
//   );
// }
///////////////////////////////////////////////////////////////////////////////////////////////////

// 3. {변수값}는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능. //////////////////////////////
// function App() {

//   let name = "홍길동";
//   const age = 20;

//   return (
//     <div className="App">
//       이름: {name}<br></br>
//       나이: {age}<br></br>
//       내년나이: {age + 1}<br></br>
//       30살보다 작나?: {age < 30}<br></br>
//       30살보다 작나?: {age > 30}<br></br>
//       30살보다 작고 10살보다 많나?: {age > 10 && age < 30}<br></br>
//       30살보다크면 크다출력하고 적으면 적다고출력: {age < 30 ? '크다' : '작다'}<br></br>
//     </div>
//   );
// }
////////////////////////////////////////////////////////////////////////////////////////////////////

// 4. 논리값(true/false) 와 null 은 {변수값} 사용시 출력이 안됨. /////////////////////////////////////
// 논리값은 출력이 되지않는다.
// null 또한 출력이 되지않는다.
// function App() {

//   let name = "홍길동";
//   let address = null;
//   let isMarried = true;

//   return (
//     <div className="App">
//       이름: {name}<br></br>
//       주소: {address}<br></br>
//       결혼여부: {isMarried}<br></br>
//     </div>
//   );
// }
////////////////////////////////////////////////////////////////////////////////////////////////////

// 5. class 속성과 style 속성 ////////////////////////////////////////////////////////////////////
// class 속성명 대신에 className을 사용해야 된다.
// style 사용할 때는 반드시 중첩 중괄호를 사용해야 된다.

// 이전 css 문법의 사용했던 케밥표기법(font-size, background-color, ...)을 사용했는데
// js 문법에서는 카멜표기법(fontSize, backgroundColor, ...) 을 사용해야 된다.

// function App() {
//   return (
//     <div className="App" style={{ color: 'red', fontSize: '40px', backgroundColor: 'black' }}>
//       Hello
//     </div>
//   );
// }
///////////////////////////////////////////////////////////////////////////////////////////////////

// 6. && 이용한 조건부 랜더링 ///////////////////////////////////////////////////////////////////////

// function Menu() {
//   return (
//     <div className="Menu">
//       <h2>Menu 컴포넌트입니다.</h2>
//     </div>
//   );
// }

// function App() {

//   // let flag = true;
//   let flag = false;

//   return (
//     <div className="App">
//       <h2>조건부랜더링</h2>
//       {flag && <Menu />}
//       {!flag && <div>Hello</div>}
//     </div>
//   );
// }
///////////////////////////////////////////////////////////////////////////////////////////////////

// 7. {...변수} 형식의 spread 연산자 사용가능. ///////////////////////////////////////////////////////
// function App() {

//   let target = { href: "http://google.com", target: "_blank" }

//   return (
//     <div className="App">
//       <h2>spread 연산자</h2>
//       <a {...target}>구글</a>
//     </div >
//   );
// }
////////////////////////////////////////////////////////////////////////////////////////////////////

// 8. 이벤트 구현식 이벤트핸들러는 카멜표기법을 사용해야 된다. /////////////////////////////////////////
// function App() {

//   function go() {
//     console.log("go");
//   }

//   return (
//     <div className="App">
//       <h2>이벤트 구현</h2>
//       <button onClick={go}>OK</button>
//     </div>
//   );
// }
////////////////////////////////////////////////////////////////////////////////////////////////////

// 9. JSX 주석 ///////////////////////////////////////////////////////////////////////////////////////
// function App() {
//   return (
//     <div className="App">
//       <h2>JSX 주석처리</h2>
//       {/* JSX 주석 */}
//       <h2>App 컴포넌트입니다. (1)</h2>
//       {/* <h2>App 컴포넌트입니다. (2)</h2> */}
//       <h2>App 컴포넌트입니다. (3)</h2>
//     </div>
//   );
// }
////////////////////////////////////////////////////////////////////////////////////////////////////

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}