JSX에 대하여

JSX(Java Script XML)는 자바스크립트를 확장한 문법으로 UI의 표현을 위해 사용된다.
JSX는 기존의 JavaScript 파일에 HTML 과 비슷한 형태의 마크업을 통해서 컴포넌트라는 javascript와 html을 모두 포함하고 연결하고 있는 유닛을 통해서 나타내고 있다.

기본 형태

• html

<button id="Click">클릭하세요!</button>

• javascript

const Button= document.querySelector("#Button");

Button.addEventListener("click",()=>{
		console.log("클릭되었습니다.")
});

• jsx

function App() {

  const Button=()=>{

    console.log("클릭되었습니다.")
  }
  return (

    <button onClick={Button}>클릭하세요!</button>
   
  );
}

JSX 문법 형태

• 컴포넌트를 나타낼 때에는 무조건 대문자로 시작해야 한다.
• jsx에서 하나의 element를 사용한다면 위와 같은 형태로 하면 되지만 여러개의 엘리먼트를 포함 시에는 opening tag 와 closing tag로 감싸주어야 한다.

옳지 않은 표현

    <div>
      <p>hello world</p>
    </div>
    <div>
        <p>hello world</p>
    </div>
   

옳은 표현

</>
    <div>
      <p>hello world</p>
    </div>
    <div>
        <p>hello world</p>
    </div>
</>   

위 두 코드의 차이는 최상위 태그인 <></> 유무의 차이라고 할 수 있다.

• 기존 html 태그의 CSS 클래스 사용 시에는 class 아닌 className으로 표기를 해야 한다
  -> class라고 표기 하면 js문법의 class로 인식하기 때문이다

    <div className="hello">
      <p>hello world</p>
    </div>

• JSX에서 표현식을 포함하기 위해서는 return 위에서 선언된 변수 명을 JSX 안에서 중괄호로 감싸서 나타낸다.

function App() {


  const hello="hello world";
  return (

	<>
      <div>
        <p>{hello}</p>
      </div>
    </>   
  );
}

• JSX 내부에서 조건부 렌더링을 나타내기 위해서는 삼항연산자를 사용해야 한다.

function App() {


  const check="yes";
  const hello="helloworld";
  return (

  	<>
      <div>
        {check==="yes"?(
            <p>{hello}</p>):(
            <p>not hello</p>

          )
        }

      </div>
    </>   
  );
}

참조:https://goddaehee.tistory.com/296
참조:https://velog.io/@hyeonwooga/%EB%85%B8%ED%8A%B8-41-React-JSX-map-Component