[혼공JS] 리액트 JSX

 

JSX란?

- JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다

- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다

- JSX는 자바스크립트 코드보단 HTML코드 처럼 보이며 좀더 간결하고 보기 쉽다.

- div, span 태그들을 사용할 수 있으며 앞으로 만들 컴포넌트도 html태그 쓰듯이 쉽게 작성가능

 

앞서 React.createElement 를 사용할 경우 사용하기 너무 복잡하기에 리액트 팀은 언어 확장형태로 React를 보다 쉽게 사용할 수 있게 JSX문법을 만들었습니다.

매번 DOM을 추가할때 마다 React.createElement를 호출하여 작성하기 보단 JSX로 간결하게 작성하여 개발하기 쉽게 진행할 수 있다.

반드시 부모 요소 하나로 감싸야한다.

function App(){
    return(
        <h1>안녕</h1>
        <h2>동작하니?</h2>
    )
}

 

 

요소 여러개가 있지만 하나의 부모요소로 감싸져 있지않아 동작 하지 않습니다.

function App(){
    return(
    	<div>
        	<h1>안녕</h1>
        	<h2>동작하니?</h2>
        </div>
    )
}

<div>태그로 감싸줘야 동작합니다.

 

 

이유 : 가상DOM에서 컴포넌트 변화를 감지할때 효율적으로 비교할 수 있도록 하나의 트리구조로 이루어져야 하기때문에

 

<div>가 싫다면? <Fragment> <>로 감싸도 됨

function App(){
    return(
    	<>
        	<h1>안녕</h1>
        	<h2>동작하니?</h2>
        </>
    )
}

 

표현식

코드를 { } 감싸면 사용가능하다!

function App() {
	const name = '리액트';
    return (
    <>
    	<h1>{name} 안녕</h1>
        <h2>동작하니?</h2>
    </>
  );
}

 

if 대신 삼항연산자

리액트 내부에서는 if를 사용할 수 없어서 삼항연산자를 사용함

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
          	<h1>리액트</h1>
          ) : (
          	<h2>리액트가 아님</h2>
          )}
      
   </div>
      
  );
}

 

AND 연산자를 사용한 조건부 랜더링

더 짦은 코드로 구현

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'&& <h1>리액트입니다.</h1>}
   </div>
  );
}

 

undefined를 렌더링하지 않기

OR연산자 사용하여 오류를 방지해야함

function App() {
  const name = undefined;
  return name || "값이 undefined입니다.";  
}

 

인라인 스타일링

기존에 HTML에서 스타일을 지정할 때 background-color 와 같이 - 문자가 포함된 이름들을, JSX에서 사용할 때에는 -를 없애고 카멜 표기법으로 작성해야 합니다.

const name = '리액트';
function App() {
  const style = {
      backgroundColor: 'black',
      fontSize: '48px',
      color :'aqua'
      fontWeight: 'bold'
      padding:16
  }
  return (
  	<div style={style}>{name}</div>
  )
}

 

class 대신 className

<div class="냐옹1">  ---> <div className="냐옹1">

 

태그는 꼭 닫아야함

self-closing 태그를 사용해도 OK

<input></input>
// 혹은 다음과 같이 self-closing 태그로 작성해도 무방
<input />

 

 

주석

{/* 주석처리 */}
// 주석처리 않됨
/* 주석처리 않됨 *?