리액트 입문기 - JSX

JSX는 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생겼습니다.

JSX의 장점

1. 보기 쉽고 익숙하다
2. 활용도가 높다.

import React form 'react';
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDom.render(<APP />,document.getElementById('root'));
serviceWorker.unregister();

ReactDom.render란?
컴포넌트를 페이지에 렌더링 하는 역할을 코드입니다. react-dom 모듈을 불러와 사용할 수 있습니다.
첫번째 파라미터 : 페이지를 렌더링할 내용을 JSX형태로 작성.
두번째 파라미터 : 렌더링할 document내부 요소를 설정.

JSX 문법

1. 감싸인 요소

   • 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문에 감싸 주어야 합니다.

     import React from 'react';
     function App(){
       return(
       <div>
       <h1>안녕 나는 리액트야</h1>
       </div>
       )
     }
     

   그런데 div로 감싸주는 것이 싫다면 이 방법을 사용하면 됩니다. 리액트 v16 에서 추가된 Fragment입니다.

   import React, { Fragment } from 'react';
   function App(){
     return(
     <Fragment>
     <h1>안녕 나는 리액트야</h1>
     </Fragment>
     )
   }
   

   혹은, <>< />로 바꾸어 사용할 수 있습니다.

2. 자바스크립트 표현
   JSX안에서 자바스크립트 표현식을 쓸 수 있습니다.

   import React from 'react';
   function App(){
     const name = '이름';
     return(
       <>
       <h1>{name} 안녕 나는 리액트야</h1>
       </>
     )
   }
   

3. 조건부 연산자
   if문 대신 조건부 연산자를 사용할 수 있습니다.

   import React from 'react';
   function App(){
     const name = '리액트';
     return(
     <>
       {name === '리액트'?(<h1>안녕 나는 리액트야</h1>) : (<h1>안녕 나는 리액트가 아니야</h1>)}
     </>
   }
   

4. AND연산자를 사용한 렌더링
   &&연산자를 사용하여 렌더링을 할 수 있습니다.

5. undefined렌더링 하지 않기
   undefined가 반환되면 페이지에는 아무것도 보이지 않습니다. 어떤 값이 undefined일 수 있다면 빈페이지가 보이지 않도록 해야 합니다.

   import React from 'react';
   function App(){
     const name = undefined;
     return name || '값이 undefined입니다.';
   }
   

6. 인라인 스타일링
   DOM요서에 스타일을 적용할 때는 객체형태로 넣어주어야 하는데 - 와 같은 기호를 제거하고 Camel 표기법으로 작성해주어야 합니다.

   import React from 'react';
   function App(){
     const name = '리액트';
     const style = {backgrondColor: 'black'};
     return <div style={style}>{name}</div>
   }
   

7. class대신 className
   JSX에서는 class가 아닌 className으로 설정해주어야 합니다.

참고문서
리액트를 다루는 기술