[React] JSX

🖥️ JSX

자바스크립트 확장문법이며 XML과 매우 비슷하게 생김

📌 자바스크립트 문법은 아니며 작성된 코드는 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

• JSX

  <script>
    function App(){
        return(
            <div>
                hi~!
            </div>
        );
    }
  </script>

• 일반자스형태의 코드로 변환

  <script>
    function App(){
        return React.createElement("div",null,"Hello".React.createElement("b",null,"react"));
    }
  </script>

• JSX내부에서 코드를 {}로 감싸서 자바스크립트 표현식을 작성할 수 있다.

  <script>
  	function App(){
    	const name = "gyu ri";
        return(
        	<div>
            	hi! {name} //output : hi! gyu ri
            </div>
        );
    }
  </script>

📍 장점

• 보기쉽고 익숙함
  - HTML코드를 작성하는 것과 비슷함
  
• 더욱 높은 활용도
  - HTML태그를 사용할 수 있을뿐만 아니라, 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.
  

✨ 감싸인 요소

리액트 컴포넌트에서 여러개를 하나의 요소로 감싸주는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리구조로 이뤄져야함

✨ Fragment (react v16)기능

div요소를 사용하고 싶지 않을 때 import 구문에서 react 모듈에 들어있는 Fragment라는 컴포넌트를 추가로 불러온다.

<script>
   function App(){
       return(
           <>
               <h1>hi~!</h1>
           </>
       );
   }
</script>

✨ 인라인 스타일링

리액트에서 DOM요소에 스타일을 적용할 때는 객체형태로!(문자열 형태X)
스타일 이름은 background-color처럼 문자가 포함되는 이름이 있는데, 이러한 이름은 -문자를 빼고 카멜표기법으로 작성

✨ AND 연산자(&&)를 사용한 조건부 렌더링

  <script>
	<div>{name==="gyu ri"?<h1>규리</h1>:null}</div>
  </script>

• 더짧은 코드

  <script>
	<div>{name==="gyu ri"&&<h1>규리</h1>:null}</div>
  </script>

• 주석

<script>
	<div>
    	주석 연습 {/*여기가 주석 */}
    </div>
  </script>